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样例
