注意

如果想产生3d效果，请务必添加透视

空间位移

语法

transform:translate3d(x,y,z) // [!code ++]

<!-- 分开来写 -->
transform:translateX();
transform:translateY();
transform:translateZ();

取值

• 像素单位数值
• 百分比

透视

perspective:数值;

相关信息

像素单位数值，数值一般在800-1200

空间旋转

语法

transform:rotateZ(数值deg);
transform:rotateY(数值deg);
transform:rotateX(数值deg);
<!-- 改变旋转轴位置，很少使用 -->
transform:rotate3d(x,y,z,角度度数);

左手法则

判断旋转方向，左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

立体呈现

<!-- 给父元素添加 -->
transform-style:preserve-3d;
<!--子元素设置位移/旋转 -->

空间缩放

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);