现在虽然不是所有的浏览器都兼容css3属性，一把做兼容的时候加上浏览器内核的前缀就可以了，CSS3节省了大量的时间和是代码整洁，同时也减少了许多UI方面的麻烦 ，如：border-radius设置圆角，box-shadow 设置盒阴影等 。下面是简单一个绚丽的CSS3动画实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#wrapper{
margin: 100px auto;
width: 100px;
height: 100px;
/* 设置视野的距离，需要给变形元素的祖先元素添加 */
perspective: 500px;
/* 设置视点的位置 */
perspective-origin: 200px -20px;
}
#cubic{
position: relative;
width: 100px;
height: 100px;
/* 给视图添加3d效果 */
animation: round 1s 5s infinite linear forwards;
/* 给视图创造3d空间 */
transform-style: preserve-3d;
}
.item{
font-size: 80px;
text-align: center;
width: 100px;
height: 100px;
line-height: 100px;
background-color: lawngreen;
border: 1px solid black;
position: absolute;
opacity: 0.5;
}
#item6{
animation: a6 1s linear forwards;
transform-origin: bottom;
}
#item5{
animation: a5 1s 1s linear forwards;
transform-origin: left;
}
#item4{
animation: a4 1s 2s linear forwards;
transform-origin: right;
}
#item3{
animation: a3 1s 3s linear forwards;
transform-origin: top;
}
#item2{
animation: a2 1s 4s linear forwards;
}
@keyframes a6{
100%{
transform: rotateX(-90deg);
}
}
@keyframes a5{
100%{
transform: rotateY(-90deg);
}
}
@keyframes a4{
100%{
transform: rotateY(90deg);
}
}
@keyframes a3{
100%{
transform: rotateX(90deg);
}
}
@keyframes a2{
100%{
transform: translateZ(100px);
}
}
@keyframes round{
100%{
transform: rotate3d(1,1,1,360deg);
}
}
</style>
<body>
<div id="wrapper">
<div id="cubic">
<div id="item1" class="item">
1
</div>
<div id="item2" class="item">
2
</div>
<div id="item3" class="item">
3
</div>
<div id="item4" class="item">
4
</div>
<div id="item5" class="item">
5
</div>
<div id="item6" class="item">
6
</div>
</div>
</div>
</body>
</html>
