2.3 更好玩的CSS 3
CSS是层叠样式表（Cascading Style Sheet）的缩写，在网页中使用HTML可以对页面元素的颜色、字体、背景和其他效果进行有效且精确地控制。
CSS 3是在HTML 5标准中根据需要针对过去CSS进行的修改和补充，主要包括以下内容。
● 盒子模型的样式：主要包括了圆角、阴影、透明以及背景渐变等新的效果。
● 选择器：为CSS 3提供了比旧版本的CSS更加灵活的选择器模型。
● 文字特效：使CSS 3支持颜色渐变、阴影文字多列显示等效果。
● 2D/3D转换：为CSS动画奠定基础，使页面元素支持更广泛的几何变换。
● 动画：为CSS加入了新的动画特性，使HTML 5代替Flash成为可能。
通过使用CSS 3能够完成许多在原有CSS框架下看似不可能的任务，比如说可以用6个div元素与CSS 3混用来实现正方体的效果。
首先在HTML中建立6个元素，为了使它们便于定位，要使用两层div对它们进行嵌套。分别用1~6的阿拉伯数字来标注正方体的6个面：
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
接下来利用CSS定义各个层次的关系、尺寸，为进行3D变换做准备。
.container {
width: 200px;
height: 200px;
position: relative;
<span style="color:#ff0000; ">perspective: 1000px; </span>
}
#cube {
width: 100%;
height: 100%;
position: absolute;
<span style="color:#ff0000; "> transform-style: preserve-3d; </span>
}
#cube figure {
width: 196px;
height: 196px;
display: block;
position: absolute;
border: 2px solid black;
}
接下来要为正方体的6个面做3D变换，由于每个面的面积大小都是完全一样的，不同的只是所处的坐标和角度，因此在此部分只需要利用translation属性进行变换，比如说font需要旋转180°，然后向页面内部平移100px：
#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
#cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
#cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
#cube.show-front { transform: translateZ( -100px ) rotateY( 0deg ); }
#cube.show-back { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube.show-right { transform: translateZ( -100px ) rotateY( -90deg ); }
#cube.show-left { transform: translateZ( -100px ) rotateY( 90deg ); }
#cube.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
#cube.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
最后为正方体加入动画效果使正方体不断滚动：
#cube { transition: transform 1s; }
最终实现的效果如图2-30所示。
图2-30 利用CSS 3所实现的正方体效果
总结：CSS 3能够完成一些在旧版本CSS中无法完成的任务，它在未来的开发中会起到举足轻重的作用。
提示
在实际开发中，可以利用本例来实现游戏中摇骰子的效果，以增强用户的娱乐性。另外在日常的应用中，动画也是增强交互必不可少的要素，比如360手机助手中就为“加速”功能加入了一个火箭升空的动画。虽然这些动画效果用JavaScript也可以实现，但是效率远不如CSS 3。另外，网页游戏界也有一条规则是：“能用CSS 3动画就别用JavaScript”。由此不难看出CSS 3的重要。