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就是这么简单!