011-Web前端-CSS动画-Transform

CSS动画-2

#6.2 接上。 2D、3D转换 Transform

---

转换Transform

CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换 或 3D 转换。

---

2D转换

通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate(  )、scale(  )、rotate(  )和skew(  )。#移动/旋转/缩放/倾斜

书写格式: transform:函数名(x轴值，y轴值);

转换的效果：

1.translate(  )函数

translate(  )方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px）

translate(x,y)：转换，沿着X和Y轴移动元素。

2.rotate(  )

通过 rotate(  ) 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。

3.scale(  )

通过值把宽和高转换为原始尺寸的n倍，接受一/两个参数，前面的为水平/宽，后面的为垂直/高。

可取值：

默认值为1 缩小：0-1之间的数 放大：大于1的数

4.skew(  )  //不常用

根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度 ，一个值只是水平轴的角度。此函数是指元素的倾斜角度。skewx()/skewy()也可。

---

3D转换

Transform 3D常用函数有：

##用到。 perspective  透视（呈现3d效果）。e.g. 400px 便于呈现好的视觉效果