CSS3 3D 转换介绍

CSS3 中的 3D 转换提供了一种在二维屏幕上呈现三维效果的方式，主要包括translate3d、rotate3d、scale3d等转换函数，下面来详细介绍：

1. 3D 转换的基本概念

坐标系
在 CSS3 的 3D 空间中，使用的是右手坐标系。X 轴是水平方向（从左到右为正方向），Y 轴是垂直方向（从上到下为正方向），Z 轴是垂直于屏幕的方向（从屏幕外指向屏幕内为正方向）。
容器属性 - perspective
这个属性用于设置 3D 元素的透视效果。简单来说，它定义了观察者与 3D 场景之间的距离，单位通常是像素。较小的perspective值会使 3D 效果更加强烈，元素看起来更大、更靠近观察者；较大的值则会使 3D 效果比较平缓。
例如：perspective: 1000px;
一般将perspective属性应用于 3D 转换元素的父容器，这样所有子元素都会共享这个透视效果。
容器属性 - transform - style
transform - style属性用于指定子元素如何在 3D 空间中呈现。它有两个主要的值：flat和preserve - 3d。
flat（默认值）：子元素将被视为在二维平面上进行转换，忽略任何 3D 效果。
preserve - 3d：子元素将在 3D 空间中进行转换，这使得可以创建复杂的 3D 结构。
例如：transform - style: preserve - 3d;

2. 3D 转换函数

translate3d(x