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

1、CSS动画实例3D立方体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

2、,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(

3、n) 定义 3D 转换元素的透视视图。学习和利用3D转换，可以绘制立体化的图形。1一个简单的立方体一个立方体有前、后、左、右、上、下共六个面，可在页面中定义立方体如下： front back top bottom left right 为立方体cube及六个面定义样式规则，每个面进行适当的平移和旋转，可以绘制出一个3D立方体。编写的HTML文件如下。一个简单的3D立方体 .container margin: 0 auto; width: 400px; height:400px; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9)

4、; 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,1

5、25,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)

6、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; f

7、ront back top bottom left right 在浏览器中打开包含这段HTML代码的html文件，可以显示如图1所示的立方体。图1 一个简单的3D立方体去掉图1中立方体各面上的文字，分别以红色、橙色、黄色、绿色、青色和蓝色表示六个面，并且定义关键帧，使得立方体旋转起来。编写的HTML文件如下。旋转的3D立方体 .container margin: 0 auto; width: 400px; height:400px; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; .

8、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, 2

9、55, 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,

10、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); 在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。图2 旋转的立方

11、体23D魔方在立方体的每个面上用线性渐变（Linear Gradients）给背景加上3*3的方格图形，构成一个3D魔方。一个对象背景用线性渐变填充的调用格式为：background: linear-gradient(direction, color-stop1, color-stop2, .);设页面中有，若为.box定义样式规则如下： .box position: relative; height:200px; width: 200px; background: linear-gradient(to right, red , blue); 可在页面中显示如图3所示的图形。图3 红蓝色线性渐

12、变若修改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, #BC8

13、F8F 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所示的方格绘制到立方体的六个面上，形成一个魔方。定义关键帧，使得魔方旋转起来。编

14、写的HTML文件如下。3D魔方 .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; ke

15、yframes 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

16、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-g

17、radient(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(90de

18、g); 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 transfor

19、m: translateY(100px) rotateX(90deg); background: repeating-linear-gradient(to right, #BC8F8F 0, #BC8F8F 2px, #FFFAFA 2px, #FFFAFA 66px, #BC8F8F 66px); 在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。图6 旋转的魔方33D小木箱有了从简单立方体到3D魔方的制作经验，下面我们再来制作一个3D木箱。主要是制作出形象的木箱面板。设页面中有，为.side定义样式规则如下： .side width: 160px; heig

20、ht: 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:

21、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:

22、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 木箱面板制作好了面板，我们就可

23、以制作出3D木箱，并让它旋转起来。编写的HTML文件如下。旋转的3D小木箱 .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-spi

24、n 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;

25、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: