CSS动画实例3D立方体.docx

为立方体cube及六个面定义样式规则，每个面进行适当的平移和旋转，可以绘制出一个3D立方体。

编写的HTML文件如下。

DOCTYPEhtml>

front

back

top

bottom

left

right

在浏览器中打开包含这段HTML代码的html文件，可以显示如图1所示的立方体。

图1一个简单的3D立方体

去掉图1中立方体各面上的文字，分别以红色、橙色、黄色、绿色、青色和蓝色表示六个面，并且定义关键帧，使得立方体旋转起来。

编写的HTML文件如下。

DOCTYPEhtml>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。

图2旋转的立方体

2．3D魔方

在立方体的每个面上用线性渐变（LinearGradients）给背景加上3*3的方格图形，构成一个3D魔方。

一个对象背景用线性渐变填充的调用格式为：

background:

linear-gradient（direction,color-stop1,color-stop2,...）;

设页面中有，若为.box定义样式规则如下：

.box

{

position:

relative;

height:

200px;

width:

200px;

background:

linear-gradient（toright,red,blue）;

}

可在页面中显示如图3所示的图形。

图3红蓝色线性渐变

若修改background属性的设置为:

background:

linear-gradient（toright,red,orange,yellow,green,blue,indigo,violet）;

可在页面中显示如图4所示的图形。

图4七彩渐变图

若定义.box定义样式规则如下：

.box

{

position:

relative;

height:

200px;

width:

200px;

background:

repeating-linear-gradient（toright,

#BC8F8F0,#BC8F8F2px,

#FF14932px,#FF149366px,

#BC8F8F66px）;

}

.box:

before

{

content:

"";

position:

absolute;

width:

200px;

height:

200px;

transform:

rotate（90deg）;

background:

repeating-linear-gradient（toright,

#BC8F8F0,#BC8F8F2px,

transparent2px,transparent66px,

#BC8F8F66px）;

}

可在页面中显示如图5所示的图形。

图53*3方格图

将图5所示的方格绘制到立方体的六个面上，形成一个魔方。

定义关键帧，使得魔方旋转起来。

编写的HTML文件如下。

DOCTYPEhtml>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。

图6旋转的魔方

3．3D小木箱

有了从简单立方体到3D魔方的制作经验，下面我们再来制作一个3D木箱。

主要是制作出形象的木箱面板。

设页面中有，为.side定义样式规则如下：

.side

{

width:

160px;

height:

160px;

position:

relative;

margin:

100pxauto;

padding:

16px;

background-color:

#d07f2c;

outline:

1pxsolid#a66523;

box-sizing:

border-box;

}

.side:

before,.side:

after

{

content:

'';

display:

block;

width:

16px;

height:

100%;

position:

absolute;

outline:

1pxsolid#a66523;

top:

0;

}

.side:

before

{

left:

0;

}

.side:

after

{

right:

0;

}

可在页面中显示如图7所示的图形。

图7面板

（1）

若修改.side的样式规则为：

.side

{

display:

block;

width:

160px;

height:

160px;

overflow:

hidden;

position:

relative;

border:

1pxsolid#a66523;

box-sizing:

border-box;

}

.side:

before,.side:

after

{

content:

'';

display:

block;

width:

150%;

height:

20%;

top:

50%;

left:

50%;

transform-origin:

0%0%;

position:

absolute;

outline:

1pxsolid#a66523;

background-color:

#c87a2a;

}

.side:

before

{

transform:

rotate（45deg）translate（-50%,-50%）;

}

.side:

after

{

transform:

rotate（-45deg）translate（-50%,-50%）;

}

可在页面中显示如图8所示的图形。

图8面板

（2）

把图8的图形放入图7中，二者组合起来可以得到如图9所示的面板。

图9木箱面板

制作好了面板，我们就可以制作出3D木箱，并让它旋转起来。

编写的HTML文件如下。

DOCTYPEhtml>