移动端CSS-形变

形变特性

在CSS中对于形变的转换主要分为2D和3D两种形式，其中包含的形变特性有：

translate：位置移动

scale：缩放

rotate：旋转

skew：斜切

perspective：透视

其中perspective这个是3D特性，前面几个特性，可以玩3D，比如translate要来作为3D特性的话，就有：

translate3d(x,y,z)

translateX

translateY

translateZ

除了perspective这个属性外，其他都是transform这个属性其中一个属性值

2D形变

2D图形内容只有水平的X轴向和垂直Y轴向，在2D形变中，需要用到的CSS属性有：

transform：向元素应用2D或者3D形变特性

transform-origin：改变被转换元素的中心原点的位置

transform-origin属性

元素的中心原点默认是在元素的中心的位置，也就是center center属性值，比如改变中心点为左上角

transform-origin: top left;

transform属性

transform是一个复合属性，包含各种形变的值，常见的有translate、scale、rotate、skew这么四个。这些属性可以同时存在，也可以只写其中几个，属性之间用空格隔开。

-webkit-transform: translateX(50px) scale(2) rotate(180deg) skewX(30deg);

        transform: translateX(50px) scale(2) rotate(180deg) skewX(30deg);

个别浏览器设备还是需要加上浏览器内核前缀

当不需要使用transform属性时，可以使用transform:none;来取消形变样式。

在transform中还有一个属性值：matrix(n,n,n,n,n,n)矩阵，需要把前面四种形变方式进行转换。如果是3D形变的话，就要用matrix3d(n,...,n)16个值得4*4矩阵

translate类型

translate主要的作用是位置偏移，偏移的单位可以是px或者是%之类的单位值，写法有：

translate(x,y)，沿X和Y轴移动

translateX(n)，沿X轴移动

translateY(n)，沿Y轴移动

scale类型

早之前在CSS中我们可以通过zoom来对元素进行缩放，但这个缩放只有整体的缩放，而不会像scale这个特性一样细致。

scale(n)：整体比例缩放

scaleX(n)：根据X轴进行缩放

scaleY(n)：根据Y轴进行缩放

rotate和skew类型

rotate和skew单位值都是度(deg)

rotate(angle)：以中心远点为基准，顺时针或者逆时针方向旋转（正数顺时针）

rotateX(angle)：以X轴的方向同时旋转

rotateY(angle)：以Y轴的方向同时旋转

skew(X-angle,Y-angle)：以X轴和Y轴方向同时倾斜

skewX(angle)：以X轴方向同时倾斜

skewY(angle)：以Y轴方向同时倾斜

3D形变

3D效果中有一个关键的点就是透视，transform-style:preserve-3d;来保留3D的位置，在transform-style属性中还有一个flat属性值，作用是不保留3D的位置

transform属性

在transform3D形变中，前面的几个属性拥有3D特性的有以下几个：

translate3d(x,y,z)

translateZ(z)

scale3d(x,y,z)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateZ(angle)

skew斜切不存在3D形变，其他几个都增加了Z轴变化的一个值，如果要把3个值写在一起，就变成...3d()这样的写法

rotate类型

这里的x,y,z代表的是一个方向矢量，如果这3个都为0时，最后一个角度值将不起作用。如：rotate3d(1,0,0,45deg)等价于rotateX(45deg)

translate类型

translate3d(x,y,z)

translateZ(z)

因为Z轴是一个3D立体的视角，还需要添加一个perspective属性，然后才会有效果。

scale类型

scale3d(x,y,z)

scaleX(x)

scaleY(y)

scaleZ(z)

perspective透视属性

透视属性需要写在父级元素上，影响子级元素的变化，而不会影响自身

当perspective的属性值越小时，透视的空间就越小，而数字过大，则会感觉似乎没有透视效果，接近于平面化