CSS中变形

transform
none | <transform-function>

transform

rotate默认是以z轴进行旋转的，也可以以y轴或者x轴进行选择，即rotateY()和rotateX()

rotate方法负数是逆时针 rotate方法样例

平移translate方法

默认第一个参数是沿x轴往右偏移，第二个参数是沿y轴往下偏移。

translate方法

缩放scale方法

scale方法 scale样例

倾斜方法skew()

skew()方法 skew样例

transform属性可以有多个方法

多个方法 多个方法样例

transform-origin

设置坐标轴的轴心，原点的位置
默认值为50%

transform- origin transform-origin样例

以上所述rotate选择方法，默认是以z轴为中心进行旋转的。

透视效果perspective

none | length
length是人眼到画面的距离【具体是到哪里还不清楚】，距离越小越明显。

perspective 沿y轴旋转透视样例

透视角度perspective-origin

perspective-origin 从正中间透视 左上角透视 为空默认是50% 左下角进行透视

translate3d()三个方向上的偏移

相对于translate多了一个z轴

translate3d() x10px,y20%,z200px

sclae3d()3个轴上的缩放

z轴不会实际影响大小

scale3d() 配合translate方法之后，z轴放大则会有效果

rotate3d()

rotate3d() rotate3d()案例

transform-style

flat | preserve-3d
默认是扁平化的

transform-style 按照y轴旋转了但是不现实 设置为preserve-3d之后，确实按照y轴进行旋转显示了

backface-visibility背面是否可见

backface-visibility backface-visibility样例