当使用 transform: rotateX(...) （或 rotateY rotateZ rotate3d）时，则使用了 3D Transform

3D Transform 分为三个轴：标准的平面 X、Y 轴与垂直于屏幕的 Z 轴；另外在旋转时，与 rotate 遵守 transform-origin 绕点旋转不同，rotate3d 绕轴旋转

3D 变换时默认采用 isometric projection 等轴测投影，可指定 perspection: 100px （注：需要在父元素上指定）选用 perspective projection 透视投影

• 指定的 perspection 是「用户相对于屏幕的距离」，值越小投影变换越明显

More

the transform-style property is not inheritable. It creates a 3D rendering context, but only direct children can participate in this context by default.

If a direct child also sets transform-style: preserve-3d, it doesn't create a new context, it forwards the context downwards, extending the 3D rendering context so that grandchildren can participate.

What about perspective? This property isn't inheritable either, but fortunately, we don't have to worry about it. The perspective applies directly to the 3D rendering context. As long as our descendants have access to the 3D rendering context, the perspective will apply automatically.