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样例
网友评论