web前端学习笔记11

11. CSS3高级特效

11.1 CSS3变形

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

语法

transform:[transform-function] ; 
/* 设置变形函数，可以是一个，也可以是多个，中间以空格分开*/

11.2 变形函数

函数名称	说明
translate()	平移函数，基于X、Y坐标重新定位元素的位置
scale()	缩放函数，可以使任意元素对象尺寸发生变化
rotate()	旋转函数，取值是一个度数值
skew()	倾斜函数，取值是一个度数值

浏览器的兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
2D transform	9+	3.5+	4.0+	10.5+	3.1+

11.3 2D位移

translate 是相对于元素本身的位置进行左右，上下平移
语法
```
translate(tx,ty);
```
tx: X轴（横坐标）移动的向量长度，可以是负数
ty: Y轴（横坐标）移动的向量长度，可以是负数

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>translate</title><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/common.css" /><style>ul {overflow: hidden;margin: 20px auto;width: 980px;border: 1px solid #000;padding: 20px;}li {float: left;margin-right: 10px;}a {display: block;background-color: #f7ae66;height: 40px;border-radius: 5px;line-height: 40px;width: 90px;color: #fff;text-align: center;transition: all 0.1s linear;}a:hover {background-color: rgba(242, 88, 6, 0.87);/* transform: translate(4px, 8px); */transform: translateX(4px) translateY(8px);}</style></head><body><div class="box"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">金融</a></li></ul></div></body>
</html>

效果图

11.4 2D缩放

scale是元素进行缩放变形函数
语法
```
scale(sx,sy);
```
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
scaleX(sx)：表示只设置X轴的缩放
scaleY(sy)：表示只设置Y轴的缩放

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>scale</title><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/common.css" /><style>ul {overflow: hidden;margin: 20px auto;width: 980px;border: 1px solid #000;padding: 20px;}li {float: left;margin-right: 10px;}a {display: block;background-color: #f7ae66;height: 40px;border-radius: 5px;line-height: 40px;width: 90px;color: #fff;text-align: center;transition: all 0.1s linear;}a:hover {background-color: rgba(242, 88, 6, 0.87);transform: scale(1.1);}</style></head><body><div class="box"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li>