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, y, z)
功能：沿着 X、Y、Z 轴移动元素。
参数：x、y、z分别表示在 X 轴、Y 轴、Z 轴方向上的移动距离，单位可以是像素（px）、百分比（%）等。例如，translate3d(100px, 50px, 20px)将元素在 X 轴方向移动 100px，在 Y 轴方向移动 50px，在 Z 轴方向移动 20px。
示例：

.element {transform: translate3d(50px, 0, 0);
}

上述代码将使.element这个元素在 X 轴正方向移动 50px。
rotate3d(x, y, z, angle)
功能：围绕指定的轴在 3D 空间中旋转元素。
参数：x、y、z是旋转轴向量的分量（取值范围是 0 - 1），angle是旋转的角度，单位是弧度（rad）或度（deg）。例如，rotate3d(1, 0, 0, 90deg)表示围绕 X 轴旋转 90 度。
示例：

.element {transform: rotate3d(0, 1, 0, 45deg);
}

代码使元素围绕 Y 轴旋转 45 度。
功能：在 3D 空间中缩放元素。
参数：x、y、z分别是在 X 轴、Y 轴、Z 轴方向上的缩放比例。例如，scale3d(2, 2, 2)将使元素在三个轴方向上都放大两倍。
示例：

.element {transform: scale3d(1.5, 1.5, 1.5);
}

这会让元素在 3D 空间中整体放大 1.5 倍。

3. 3D 转换的应用场景

3D 相册效果
可以通过将一组照片元素使用translate3d和rotate3d进行布局和旋转，配合perspective属性营造出 3D 相册的效果。用户可以通过鼠标交互（如鼠标移动或点击）来切换照片的显示角度，实现逼真的 3D 相册浏览体验。
3D 产品展示
对于电商网站上的产品展示，利用 3D 转换可以让用户从不同角度查看产品细节。例如，将产品模型的各个部分分别进行 3D 转换，使顾客可以通过旋转或缩放操作查看产品的各个面，就像在现实生活中拿着产品查看一样。
通过合理运用 CSS3 的 3D 转换，可以为网页添加丰富的视觉效果，增强用户体验。