3D转换——网页三维坐标系，可实现3D位移、3D旋转等效果。
一、3D转换之位移translate3d
transform:translate3d(x,y,z) x,y,z是不能省略的，如果没有就写0
transform:translateZ z越大，物体越大
*透视perspective
透视我们也称之为视距，就是人的眼睛到屏幕的距离。距离越小，图像越大。
透视必须写在被观察元素的父盒子上。
二、3D转换之旋转rotate3d
2D旋转只能围绕某个中心点，3D旋转可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。正方向遵循左手法则。
transform:rotateX(45deg) 沿着x轴正方向旋转45度
transform:rotateY(45deg) 沿着y轴正方向旋转45度
transform:rotateZ(45deg) 沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转，deg为角度。例如transform:rotate3d(1,1,0,deg) 0、1代表是否选择
transform-style
（1）控制子元素是否开启三维立体环境。
（2）transform-style:flat 默认不开启 preserve-3d 开启立体空间
（3）代码写给父级盒子，但是影响的是子盒子。
网友评论