效果如下
3d基礎知識
軸向現在就開始寫我們的**吧~~
首先是我們的html結構,我們這裡只寫乙個立體正方形.
首先乙個正方形得有六個相同面上下左右前後,相應我們去寫六個html元素.
class
="cube"
>
class
="small"
>
上div
>
class
="small"
>
下div
>
class
="small"
>
左div
>
class
="small"
>
右div
>
class
="small"
>
前div
>
class
="small"
>
後div
>
div>
/!--乙個大盒子裡面有六個小盒子分別代表正方體的六個面--/接著我們來寫css樣式
首先設定最外層大盒子的樣式.
.cube
.cube .small
.cube .small:nth-child(1)
/*上面:x軸旋轉90deg,此時z軸朝上,z軸再平移150px即可*/
.cube .small:nth-child(2)
/*下面:x軸旋轉-90deg,此時z軸朝下,z軸再平移150px即可*/
.cube .small:nth-child(3)
/*左面:y軸旋轉-90deg,此時z軸朝左,z軸再平移150px即可*/
.cube .small:nth-child(4)
/*右面:y軸旋轉90deg,此時z軸朝右,z軸再平移150px即可*/
.cube .small:nth-child(5)
/*前面:直接朝著z軸我們眼睛這條軸向前平移150px即可*/
.cube .small:nth-child(6)
/*後面:y軸旋轉180deg,此時z軸朝後,z軸再平移150px即可*/
.cube
/*定義了乙個roll的動畫,時間4s勻速無限迴圈*/
@keyframes roll
100%
}/*定義了roll動畫的關鍵幀*/
.cube
/*開啟父級盒子的3d屬性,能容納子盒子*/
.cube .small
"cube">
"small">上
"small">下
"small">左
"small">右
"small">前
"small">後
使用css3製作盒子
直接切圖製作這樣的盒子的話可能不用花很長的時間，但是使用css3的話卻是可以大大加快頁面載入速度的 所以嘗試了一下，當然並不是出於載入速度的考慮，純粹的因為shoujian tothtml registergiftbox registergift registergift registergifti...
CSS3製作404立體字型
css3製作404立體字型頁面效果 滑鼠移動上去，背景色變白。動態效果 用來多個文字陰影，達到和用ps一樣的效果。還是用ps來的方便。html doctype html html head meta charset utf 8 title css3 製作404 立體字型頁面效果 title link...
CSS3之設計動態立體盒子
css3設計3d效果圖 使用到css3中的變形 縮放 傾斜。只寫了相容gecto的。發張鼓勵自己 doctype html html head meta charset utf 8 title title style cube cube p cube h2 cube.one topface,left...