HTML+CSS：transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放

transform: translate3d(x, y, z)

语法

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）

• 像素单位数值
• 百分比

使用perspective属性实现透视效果

transform: rotateXYZ实现元素空间旋转效果

• transform: rotateZ(值);
• transform: rotateX(值);
• transform: rotateY(值);

空间旋转-Z轴

空间旋转-X轴：需配上透视效果

空间旋转-Y轴：需配上透视效果

• rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
• x，y，z 取值为0-1之间的数字

transform-style: preserve-3d呈现立体图形

• 父元素添加 transform-style: preserve-3d;
• 使子元素处于真正的3d空间
  

实现立体cube

scale实现空间缩放效果

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