CSS动画实例：3D立方体
CSS3支持3D转换，与3D转换有关的属性有：html
transform：向元素应用 2D或3D 转换。浏览器
transform-origin：改变被转换元素的位置。ide
transform-style：规定被嵌套元素如何在3D空间中显示。函数
perspective：规定 3D 元素的透视效果。oop
perspective-origin：规定 3D 元素的底部位置。学习
backface-visibility 定义元素在不面对屏幕时是否可见。动画
在transform属性设置中，可以使用的3D转换函数主要有：spa
matrix3d(n,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,n )：定义3D转换，使用16个值的 4x4 矩阵。3d
translate3d(x,y,z)：定义3D平移动转换。code
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="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>
为立方体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 旋转的小木箱