CSS动画实例：3D立方体

CSS3支持3D转换，与3D转换有关的属性有：

transform：向元素应用 2D或3D 转换。

transform-origin：改变被转换元素的位置。

transform-style：规定被嵌套元素如何在3D空间中显示。

perspective：规定 3D 元素的透视效果。

perspective-origin：规定 3D 元素的底部位置。

backface-visibility 定义元素在不面对屏幕时是否可见。

在transform属性设置中，可使用的3D转换函数主要有：

matrix3d(n,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,n )：定义3D转换，使用16个值的 4x4 矩阵。

translate3d(x,y,z)：定义3D平移动转换。

translateX(x)：定义3D沿X轴平移转换。

translateY(y) ：定义3D沿Y轴平移转换。

translateZ(z) ：定义3D沿Z轴平移转换。

scale3d(x,y,z) ：定义 3D 缩放转换。

rotate3d(x,y,z,angle)：定义 3D 旋转。

rotateX(angle)：定义沿 X 轴的 3D 旋转。

rotateY(angle) ：定义沿 Y 轴的 3D 旋转。

rotateZ(angle) ：定义沿 Z 轴的 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图。

学习和利用3D转换，可以绘制立体化的图形。

1．一个简单的立方体

一个立方体有前、后、左、右、上、下共六个面，可在页面中定义立方体如下：

<div class="front">front</div>

<div class="bottom">bottom</div>

<div class="right">right</div>

</div>

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

<!DOCTYPE html>

<html>

<head>

<title>一个简单的3D立方体</title>

<style>

  .container

  {

    margin: 0 auto;

    width: 400px;

    height:400px;

    background:#d8d8d8;

    border: 4px solid rgba(255, 0, 0, 0.9);

    border-radius: 10%;

  }

  .cube

  {

    position: relative;

    width: 200px;

    top:80px;

    left:80px;

    transform-style:preserve-3d;

    perspective: 800px;

    perspective-origin: -50% -100px;

  }

  .cube div

  {

    position: absolute;

    width: 200px;

    height: 200px;

    background: rgba(255,255,255,0.1);

    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);

    text-align: center;

    line-height: 200px;

    font-weight:bold;

    text-shadow:-1px 1px 5px #f60;

    color:#fff;

    font-family: sans-serif;

    text-transform: uppercase;

    font-size:30px;

  }

  .front

  {

    transform: translateZ(100px);

  }

  .back

  {

    transform: translateZ(-100px) rotateY(180deg);

  }

  .left

  {

    transform:rotateY(270deg) translateX(-100px);

    transform-origin: center left;

  }

  .right

  {

    transform:rotateY(-270deg) translateX(100px);

    transform-origin: top right;

  }

  .top

  {

    transform:rotateX(-90deg) translateY(-100px);

    transform-origin: top center;

  }

  .bottom

  {

    transform:rotateX(90deg) translateY(100px);

    transform-origin: bottom center;

  }

</style>

</head>

<body>

<div class="container">

  <div class="cube">

    <div class="front">front</div>

    <div class="back">back</div>

    <div class="top">top</div>

    <div class="bottom">bottom</div>

    <div class="left">left</div>

    <div class="right">right</div>

  </div>

</div>

</body>

</html>

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>旋转的3D立方体</title>

<style>

  .container

  {

    margin: 0 auto;

    width: 400px;

    height:400px;

    background:#d8d8d8;

    border: 4px solid rgba(255, 0, 0, 0.9);

    border-radius: 10%;

  }

  .cube

  {

    width: 200px;

    height: 200px;

    margin: 100px auto;

    position: relative;

    transform-style: preserve-3d;

    animation: anim 8s linear infinite;

  }

  .cube div

  {

    width: 100%;

    height: 100%;

    position: absolute;

  }

  .front

  {

     background: rgba(255, 0, 0, 0.3);

     transform: translateZ(100px);

  }

  .back

  {

     background: rgba(255, 0, 255, 0.3);

     transform: translateZ(-100px);

  }

  .left

  {

     background-color: rgba(255, 255, 0, 0.3);

     transform-origin: left;

     transform: rotateY(90deg) translateX(-100px);

  }

  .right

  {

     background: rgba(0, 255, 0, 0.3);

     transform-origin: right;

     transform: rotateY(90deg) translateX(100px);

  }

  .top

  {

    background: rgba(255, 0, 255, 0.3);

    transform: rotateX(90deg) translateZ(100px);

  }

  .bottom

  {

    background: rgba(0, 0, 255, 0.3);

    transform: rotateX(-90deg) translateZ(100px);

  }

  @keyframes anim

  {

      0% { transform: rotateX(0deg) rotateY(0deg); }

      100% { transform: rotateX(360deg) rotateY(360deg);}

  }

</style>

</head>

<body>

<div class="container">

 <div class="cube">

  <div class="front"></div>

  <div class="back"></div>

  <div class="top"></div>

  <div class="bottom"></div>

  <div class="left"></div>

  <div class="right"></div>

 </div>

</div>

</body>

</html>

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

图2 旋转的立方体

2．3D魔方

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

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

background: linear-gradient(direction, color-stop1, color-stop2, ...);

设页面中有<div class="box"></div>，若为.box定义样式规则如下：

.box

{

position: relative;

height:200px;

width: 200px;

background: linear-gradient(to right, red , blue);

}

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

图3 红蓝色线性渐变

若修改background属性的设置为:

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

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

图4 七彩渐变图

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

.box

{

position: relative;

height:200px;

width: 200px;

background: repeating-linear-gradient(to right,

#BC8F8F 0, #BC8F8F 2px,

#FF1493 2px, #FF1493 66px,

#BC8F8F 66px );

}

.box:before

{

content: "";

position: absolute;

width: 200px;

height: 200px;

transform: rotate(90deg);

background: repeating-linear-gradient(to right,

#BC8F8F 0,#BC8F8F 2px,

transparent 2px, transparent 66px,

#BC8F8F 66px );

}

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

图5 3*3方格图

将图5所示的方格绘制到立方体的六个面上，形成一个魔方。定义关键帧，使得魔方旋转起来。

编写的HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>3D魔方</title>

<style>

  .container

  {

     margin: 0 auto;

     width: 400px;

     height:400px;

     background:#d8d8d8;

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

  }

  .cube

  {

     position: relative;

     margin: 100px auto;

     width: 200px;

     height: 200px;

     transform-style: preserve-3d;

     animation: rotateCube 8s linear infinite;

  }

  @keyframes rotateCube

  {

      0%   { transform: rotateX(0) rotateY(0); }

      100% { transform: rotateX(360deg) rotateY(360deg); }

  }

  .side

  {

     position: absolute;

     width: 200px;

     height: 200px;

  }

  .side:before

  {

     content: "";

     position: absolute;

     width: 200px;

     height: 200px;

     transform: rotate(90deg);

     background: repeating-linear-gradient(to right,

                  #BC8F8F 0,#BC8F8F 2px,

                  transparent 2px, transparent 66px,

                  #BC8F8F 66px );

  }

  .front

  {

     transform: translateZ(100px);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #8B008B 2px, #8B008B 66px,

                   #BC8F8F 66px );

  }

  .back

  {

     transform: translateZ(-100px);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #6495ED 2px, #6495ED 66px,

                   #BC8F8F 66px );

  }

  .left

  {

     transform: translateX(-100px) rotateY(90deg);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #FFD700 2px, #FFD700 66px,

                   #BC8F8F 66px );

  }

  .right

  {

     transform: translateX(100px) rotateY(90deg);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #FF1493 2px, #FF1493 66px,

                   #BC8F8F 66px );

  }

  .top

  {

     transform: translateY(-100px) rotateX(90deg);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #00FF7F 2px, #00FF7F 66px,

                   #BC8F8F 66px);

  }

  .bottom

  {

     transform: translateY(100px) rotateX(90deg);

     background: repeating-linear-gradient(to right,

                   #BC8F8F 0, #BC8F8F 2px,

                   #FFFAFA 2px, #FFFAFA 66px,

                   #BC8F8F 66px);

  }

</style>

</head>

<body>

<div class="container">

  <div class="cube">

    <div class="side front"></div>

    <div class="side back"></div>

    <div class="side left"></div>

    <div class="side right"></div>

    <div class="side top"></div>

    <div class="side bottom"></div>

  </div>

</div>

</body>

</html>

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

图6 旋转的魔方

3．3D小木箱

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

设页面中有<div class='side'></div>，为.side定义样式规则如下：

.side

{

width: 160px;

height: 160px;

position: relative;

margin: 100px auto;

padding: 16px;

background-color: #d07f2c;

outline: 1px solid #a66523;

box-sizing: border-box;

}

.side:before, .side:after

{

content: '';

display: block;

width: 16px;

height: 100%;

position: absolute;

outline: 1px solid #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: 1px solid #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: 1px solid #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文件如下。

<!DOCTYPE html>

<html>

<head>

<title>旋转的3D小木箱</title>

<style>

  .container

  {

     margin: 0 auto;

     width: 400px;

     height: 400px;

     border: 4px solid rgba(255, 0, 0, 0.9);

     background:#d8d8d8;

     border-radius: 10%;

  }

  .crate

  {

     width: 160px;

     height: 160px;

     position: relative;

     margin: 100px auto;

     transform-style: preserve-3d;

     animation: crate-spin 10s linear infinite;

  }

  .side

  {

     width: 100%;

     height: 100%;

     position: absolute;

     transform-style: preserve-3d;

     padding: 16px;

     background-color: #d07f2c;

     outline: 1px solid #a66523;

     box-sizing: border-box;

  }

  .side:before,  .side:after

  {

     content: '';

     display: block;

     width: 16px;

     height: 100%;

     position: absolute;

     outline: 1px solid #a66523;

     top: 0;

  }

  .side:before

  {

     left: 0;

  }

  .side:after

  {

     right: 0;

  }

  .side-inner

  {

     display: block;

     width: 100%;

     height: 100%;

     overflow: hidden;

     position: relative;

     border: 1px solid #a66523;

     box-sizing: border-box;

  }

  .side-inner:before, .side-inner:after

  {

     content: '';

     display: block;

     width: 150%;

     height: 20%;

     top: 50%;

     left: 50%;

     transform-origin: 0% 0%;

     position: absolute;

     outline: 1px solid #a66523;

     background-color: #c87a2a;

  }

  .side-inner:before

  {

     transform: rotate(45deg) translate(-50%, -50%);

  }

  .side-inner:after

  {

     transform: rotate(-45deg) translate(-50%, -50%);

  }

  .crate .side .side-inner span

  {

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%);

     z-index: 10;

     font-size: 80px;

     font-family: "Cooper Black", serif;

     color: #f6f632;

  }

  .top

  {

     transform: translateY(-80px) rotateX(90deg);

  }

  .bottom

  {

     transform: translateY(80px) rotateX(90deg);

  }

  .left

  {

     transform: translateX(-80px) rotateY(-90deg);

  }

  .right

  {

     transform: translateX(80px) rotateY(90deg);

  }

  .front

  {

     transform: translateZ(80px);

  }

  .back

  {

     transform: translateZ(-80px) rotateY(180deg);

  }

  @keyframes crate-spin

  {

     from { transform: rotateX(-20deg) rotateY(0deg);  }

     to   { transform: rotateX(-20deg) rotateY(-360deg); }

  }

</style>

</head>

<body>

<div class="container">

  <div class='crate'>

    <div class='side top'>

      <div class='side-inner'></div>

    </div>

    <div class='side bottom'>

      <div class='side-inner'></div>

    </div>

    <div class='side left'>

      <div class='side-inner'>

        <span>A</span>

      </div>

    </div>

    <div class='side right'>

      <div class='side-inner'>

        <span>C</span>

      </div>

    </div>

    <div class='side front'>

      <div class='side-inner'>

        <span>B</span>

      </div>

    </div>

    <div class='side back'>

      <div class='side-inner'>

        <span>D</span>

      </div>

    </div>

  </div>

</div>

</body>

</html>

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

图10 旋转的小木箱

巴特西

CSS动画实例：3D立方体

1．一个简单的立方体

2．3D魔方

3．3D小木箱

最新文章

热门文章