×目录[1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格前面的话 本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transfor ...
×
目录
[1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格
3d位移
3d位移函数主要包括traslateZ()和translate3d()
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
traslateZ(z)相当于translate3d(0,0,z)
[注意]常用-webkit-transform: translateZ(0);来开启硬件加速
[注意]3d位移函数相当于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)
3d缩放
3d缩放函数主要包括scaleZ()和scale3d()
scale3d(x,y,z)
默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放
scaleZ(z)相当于scale3d(1,1,z)
[注意]3d位移函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)
[注意]scaleZ()和scale3d()单独使用时没有任何效果
.box1 .in{ transform: translateZ(-500px);}.box2 .in{ transform: translateZ(-100px);}.box3 .in{ transform: scaleZ(5) translateZ(-100px);}
原标题：深入理解CSS变形transform(3d)
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
