CSS3D-从构建一个立方体开始

css3D

3D变化是css3的新属性，可以用来实现一些酷炫的效果。本文以如何搭建一个立方体为例谈谈关于3D的个人见解。

 

页面坐标是三维的，X轴从页面左边向右，Y轴从页面上方向下，Z轴从页面里面向外，和我们以前数学立体几何中的坐标系很相似，只是Y轴的方向相反，坐标原点默认时图形中心。需要注意两点：

1.旋转角度为正时遵循我自己称之为的“左手定则”，即左手拇指指向坐标轴正方向，旋转方向就是四指朝向的方向；旋转角度为负时遵守类似的“右手定则”。

2.旋转图形时，旋转的是坐标系，而不是图形。例如rotateX(90deg)；按照我们的“左手定则”，坐标系此时的Z轴变为从页面下方往上，而Y轴变为从页面里面向外。

构建立体图形时只需要记住三个层次即可：

1.景深，即perspective，就是我们观察者视角距离物体的位置。

2.容器，比如构建一个立方体，立方体有6个面，那么需要一个容器，使得转动这个容器，6个面同时做动作。容器也很简单，需要添加一个transform-style: preserve-3d;属性，不然6个面就会被压扁到一个平面上显示。

3.借用很多人的舞台-容器-演员的说法，我们把立方体的每个面也称为演员，演员做的事情也很简单，只需要安排好每个角色的位置和角度即可。

 

多说无益，下面具体展示一下如何构建一个立方体。

 

<div class="stage">
    <div class="rect">
        <div class="face top">top</div>
        <div class="face bot">bot</div>
        <div class="face left">left</div>
        <div class="face right">right</div>
        <div class="face front">front</div>
        <div class="face back">back</div>
    </div>
</div>

很明显的三层结构。

第一层：

.stage{
    position: absolute;
    left:300px;
    top:400px;
    background-color: #cccccc;
    width:300px;
    height: 200px;
    perspective: 400px;
}

第二层：

.stage .rect{
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height:200px;
    transform-style: preserve-3d;/*这个必须要有*/
    transform: rotateX(-30deg) rotateY(30deg);
}

第三层：

.stage .rect .face{
    position: absolute;
    top: 50px;
    left: 100px;
    width: 100px;
    height:100px;
    color: #ffffff;
    line-height: 100px;
    text-align: center;
}
.stage .rect .front{
    transform: translateZ(50px);
    background-color: #0ea432;
}
.stage .rect .back{
    transform: rotateY(180deg) translateZ(50px);
    background-color: #0d71bb;
}
.stage .rect .left{
    transform: rotateY(-90deg) translateZ(50px);
    background-color: #d67c1c;
}
.stage .rect .right{
    transform: rotateY(90deg) translateZ(50px);
    background-color: #ffb70a;
}
.stage .rect .top{
    transform: rotateX(90deg) translateZ(50px);
    background-color: #c23321;
}
.stage .rect .bot{
    transform: rotateX(-90deg) translateZ(50px);
    background-color: #2bbbff;
}

效果图如下

假如取消景深，是什么样的效果？

 

看起来很奇怪，对吧，因为没有遵循近大远小的实际。

假如取消

transform-style:preserve-3d；

会怎样？

可以看到，图形被压扁在一个平面上了。

记住三个层次，两点注意，掌握CSS3D就是这么简单！