在網(wǎng)頁(yè)設(shè)計(jì)中，CSS3 動(dòng)畫可以為網(wǎng)頁(yè)添加一些炫酷的效果，讓網(wǎng)頁(yè)更加生動(dòng)活潑。它的應(yīng)用是非常廣泛的，比如可以用來(lái)制作幻燈片、動(dòng)態(tài)導(dǎo)航欄等。下面是一種常見(jiàn)的應(yīng)用，即利用 CSS3 動(dòng)畫改變視角。

/* 定義一個(gè)三維盒子 */
.box{
width: 200px;
height: 200px;
perspective: 1000px;
}
/* 定義一個(gè)正方體的面 */
.side{
width: 200px;
height: 200px;
position: absolute;
border: solid 2px #333;
text-align: center;
line-height: 200px;
font-size: 30px;
}
/* 定義正方體的各個(gè)面 */
.front{
transform: translateZ(100px);
}
.back{
transform: rotateY(180deg) translateZ(100px);
}
.left{
transform: rotateY(-90deg) translateZ(100px);
}
.right{
transform: rotateY(90deg) translateZ(100px);
}
.top{
transform: rotateX(-90deg) translateZ(100px);
}
.bottom{
transform: rotateX(90deg) translateZ(100px);
}
/* 定義一個(gè)動(dòng)畫效果 */
@keyframes rotate{
33% {
transform: rotateX(90deg) rotateY(320deg) rotateZ(-20deg);
}
66%{
transform: rotateX(110deg) rotateY(60deg) rotateZ(-15deg);
}
100%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}
/* 定義正方體的各個(gè)面的動(dòng)畫效果 */
.front:hover, .back:hover, .left:hover, .right:hover, .top:hover, .bottom:hover{
animation: rotate 2s ease-in-out;
}

以上是一段實(shí)現(xiàn)三維正方體的 CSS3 代碼，其中運(yùn)用了 CSS3 的 transform 屬性。可以看到，通過(guò)給盒子定義 perspective 屬性，可以得到一個(gè)有深度感的三維盒子。而正方體的各個(gè)面則用了不同的變換函數(shù)實(shí)現(xiàn)。最后通過(guò)定義一個(gè)動(dòng)畫，讓每個(gè)面在鼠標(biāo)移動(dòng)到上面時(shí)都會(huì)產(chǎn)生旋轉(zhuǎn)效果，讓整個(gè)正方體更加生動(dòng)活潑。

這樣的效果雖然看起來(lái)比較簡(jiǎn)單，但運(yùn)用到實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，可以對(duì)網(wǎng)頁(yè)的美觀程度起到很大的提升作用，特別是在展示產(chǎn)品、圖片等內(nèi)容時(shí)，可以增強(qiáng)用戶的視覺(jué)體驗(yàn)。