2019-05-22 transform转换

变形（transform）属性-2D

让元素在一个坐标系统中变形。这个属性可以移动、旋转和缩放元素。

transform:none | []*;

默认是：

transform:none;

rotate()旋转

指定角度参数对原元素指定2D旋转

transform:rotate();

例：transform: rotate(-45deg);逆时针旋转45度
angle为正数代表顺时针旋转，负数是逆时针。

translate()平移

从当前位置向x轴或y轴移动。

translateX（x）

水平移动，从左到右为正

translateY（y）

垂直移动，从上到下为正

translate（x，y）

水平垂直移动

scale()缩放

scaleX(x)

水平缩放，中心点，取值为百分比

scaleY(y)

竖直缩放

scale(x,y)

缩放，如果就填一个数，那么是等比例放大缩小

skew()扭曲或斜切

skewX

(正值：逆时针)x轴斜切

skewY

(正值：顺时针)y轴斜切

skew(x,y)

如果y没填只有x，就默认y为0

3D变换

rotate3D（）

transform:rotateX();//X轴旋转的角度
transform:rotateY();//Y轴旋转的角度
transform:rotateZ();//Z轴旋转的角度
transform:rotate(x,y,z,);//Z轴旋转的角度

理解：正面看体操运动员玩单杠

translate3D（）

translateZ(z)//z轴平移
transform:translate3d(x,y,z)//从当前位置向z轴移动。

scale3D（）

transform:scaleZ(z)//z轴缩放
transform:scale3d(x,y,z)//从当前3d缩放。

坐标原心

transform-origin:25% top;

矩阵

transform:matrix(a,b,c,d,tx,ty);

指定嵌套元素是怎样的三维空间

transform-style:flat|preserve-3d;

perspective属性

指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分。
属性值为0或负值或none（none是默认值）时，没有透视效果

perspective:number|none;

perspective-origin属性

指定透视点的位置。

perspective-origin:x-axisy-axis;
perspective-origin:50%50%;//默认值

backface-visibility

指定元素背面面向用户时是否可见

backface-visibility:visible|hidden;