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
:
300
px
;
top
:
400
px
;
background-color
:
#cccccc
;
width
:
300
px
;
height
:
200
px
;
perspective
:
400
px
;
}
第二层：
.
stage
.
rect
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
300
px
;
height
:
200
px
;
transform-style
:
preserve-3d
;/*这个必须要有*/
transform
:
rotateX
(-
30
deg
)
rotateY
(
30
deg
);
}
第三层：
.
stage
.
rect
.
face
{
position
:
absolute
;
top
:
50
px
;
left
:
100
px
;
width
:
100
px
;
height
:
100
px
;
color
:
#ffffff
;
line-height
:
100
px
;
text-align
:
center
;
}
.
stage
.
rect
.
front
{
transform
:
translateZ
(
50
px
);
background-color
:
#0ea432
;
}
.
stage
.
rect
.
back
{
transform
:
rotateY
(
180
deg
)
translateZ
(
50
px
);
background-color
:
#0d71bb
;
}
.
stage
.
rect
.
left
{
transform
:
rotateY
(-
90
deg
)
translateZ
(
50
px
);
background-color
:
#d67c1c
;
}
.
stage
.
rect
.
right
{
transform
:
rotateY
(
90
deg
)
translateZ
(
50
px
);
background-color
:
#ffb70a
;
}
.
stage
.
rect
.
top
{
transform
:
rotateX
(
90
deg
)
translateZ
(
50
px
);
background-color
:
#c23321
;
}
.
stage
.
rect
.
bot
{
transform
:
rotateX
(-
90
deg
)
translateZ
(
50
px
);
background-color
:
#2bbbff
;
}
效果图如下
假如取消景深，是什么样的效果？
看起来很奇怪，对吧，因为没有遵循近大远小的实际。
假如取消transform-style:preserve-3d；会怎样？
可以看到，图形被压扁在一个平面上了。
记住
三个层次，两点注意，掌握CSS3D就是这么简单！