CSS3D 基本概念 | 学习总结

1. 坐标系统

CSS中的所有元素都存在于坐标系统当中。在元素未引入tranform属性之前，元素的初始坐标点位于元素的左上角(left、top)，此时元素所处的坐标系统具备X轴、Y轴、以及Z轴，不过需要强调的是：此坐标系统中的Z轴并不是三维空间中的Z轴，而仅仅是来描述元素层级的参数（z-index）；当对元素添加transform属性之后，元素所处的坐标系统发生了改变，此时的坐标系统便是三维坐标系统，元素的初始坐标点处于元素的中心位置(center、center、0)。总之，transform属性创建出的三维坐标系统取代了元素所处的二维坐标系统，这便是元素能够实现3D变换的原因。

2. CSS3D成像原理

CSS3并没有提供三维引擎，而transform作为CSS3中的一个属性也无法提供3D空间的基础模型元素，如：独立的三维坐标系、几何图形和材质贴图、光照和摄像机。但是transform能够通过计算来模拟出3D空间效果。整个CSS3D变换的关键是 坐标系统。我们对元素进行的旋转、平移等转换实际上是通过对坐标系进行的旋转、平移来实现的。

TIP

对坐标系进行变换的顺序十分重要！比如：把元素先沿着X轴平移100px再围绕Y轴旋转90度与把元素围绕Y轴旋转90度在沿X轴平移100px得到的结果是不一样的！CSS3D变换不满足交换律，即：axb != bxa

3. CSS 3D场景搭建

3D空间最基本三元素：摄影镜头、立体空间、立体物体。CSS3D场景搭建就是模拟出这三个基本元素。代码如下：

<div class="camera">
    <div class="space">
        <div class="box"></div>
    </div>
</div>

1
2
3
4
5

3.1 摄影镜头

“横看成岭侧成峰，远近高低各不同”。摄像镜头摆放的角度和距离会影响观察到的物体外观。观察角度和观察距离可以分别由perspective-origin和perspective来描述。代码如下：

.camera {
    width: 200px;
    height: 200px;
    perspective-origin: center center;
    perspective: 500px;
}

1
2
3
4
5
6

补充说明：<div class="camera"></div>是一个宽x高为200x200的DOM元素，真实存在于文档流当中。而 摄像机只是一个想象模型，它是通过perspective和perspective-origin来描述出来的，在实际渲染物体box时，仅作为计算量存在。

3.2 立体空间

设定立体空间十分简单，只要针对space设置transform-style: perserve-3d即可，这样space下所有的子元素都可以用3D进行变换。代码如下：

.space {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

1
2
3
4
5

3.3 立体物体

我们为box设置100x100像素的宽高，并将其移到space的中心，代码如下：

.box {
    width: 100px;
    height: 100px;
    transform: translateX(50px) translateY(50px);
    /* transform: translateX(50px) translateY(50px) translateZ(50px); */
}

1
2
3
4
5
6

WARNING

此时，无论如何调整perspective以及perspective-origin的值，box在视觉上都不会发生变化。因为，此时的box未在Z轴方向发生偏移，离开Z轴就无法建立立体模型，所以perspective以及perspective-origin的值没有意义。

perspective-origin x: 50%

perspective-origin y: 50%

perspective: 500px

translateZ: 0px

rotateX: 0deg

rotateY: 0deg

4. 总结

本章主要说明CSS3D立体图形成像原理。CSS3D的成像原理是通过计算模拟出来的，只要建立起摄像机、立体空间、立体物体就可以绘制3D图形了。另外，对于相关属性如：perspective及transform并没有做更多的介绍，不熟悉的话需自行查阅。

# 1. 坐标系统

# 2. CSS3D成像原理

# 3. CSS 3D场景搭建

# 3.1 摄影镜头

# 3.2 立体空间

# 3.3 立体物体

# 4. 总结

# 5. 参考