現(xiàn)在雖然不是所有的瀏覽器都兼容css3屬性窄瘟，一把做兼容的時(shí)候加上瀏覽器內(nèi)核的前綴就可以了莱找，CSS3節(jié)省了大量的時(shí)間和是代碼整潔堰怨，同時(shí)也減少了許多UI方面的麻煩 兔簇，如：border-radius設(shè)置圓角，box-shadow 設(shè)置盒陰影等 锹淌。下面是簡單一個(gè)絢麗的CSS3動畫實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#wrapper{
margin: 100px auto;
width: 100px;
height: 100px;
/* 設(shè)置視野的距離匿值，需要給變形元素的祖先元素添加 */
perspective: 500px;
/* 設(shè)置視點(diǎn)的位置 */
perspective-origin: 200px -20px;
}
#cubic{
position: relative;
width: 100px;
height: 100px;
/* 給視圖添加3d效果 */
animation: round 1s 5s infinite linear forwards;
/* 給視圖創(chuàng)造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>
