CSS3D動(dòng)畫可以幫助你創(chuàng)建非常棒的3D效果,其使用簡單,下面我們將為您詳細(xì)介紹它的使用方法。
/* 先設(shè)置容器樣式 */ .container{ position: relative; perspective: 1000px; /* 設(shè)置3D視角 */ } /* 設(shè)置3D變形樣式 */ .box{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: red; transform-style: preserve-3d; /* 這里保留3D效果 */ } /* 開始動(dòng)畫 */ .box{ transform: rotateY(45deg); /* 設(shè)置旋轉(zhuǎn)角度 */ transition: transform 1s ease; /* 這里設(shè)置動(dòng)畫效果 */ }
以上是一個(gè)簡單的CSS3D動(dòng)畫效果,第一個(gè)代碼段設(shè)置容器樣式,需要設(shè)置position屬性和perspective屬性,perspective屬性是設(shè)置3D視角。第二個(gè)代碼段設(shè)置3D變形樣式,需要設(shè)置position屬性,transform-style屬性和background屬性,其中transform-style屬性是保留3D效果。第三個(gè)代碼段是開始動(dòng)畫部分,需要設(shè)置transform屬性和transition屬性,其中transform屬性是3D變形的主要設(shè)置,transition屬性是設(shè)置動(dòng)畫效果的。
如上所述,你可以很方便地為你的網(wǎng)頁添加特效。
下一篇css3d 重影