3D立体空间的3根轴线
x轴:水平,向右为正,向左为负
y轴:垂直,向下为正,向上为负
z轴:垂直于屏幕,向外为正,向内为负
1)3D必备属性
transform-style: preserve-3d; 创建3d空间
什么时候搭建3d舞台?
父元素有3D变形,子元素也有3D变形
perspective属性:景深(透视),属性值为透视点到元素的距离,近大远小;也可以让网页产生3D效果,单位像素
preserve-3d, 如果搭配overflow: hidden/scroll/auto使用,相当于2D效果
transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中
2) 位移
transform: translateZ(z); 沿着z轴方向位移
transform: translate3d(x,y,z) 沿着x、y、z轴方向位移