CSS3 3D旋轉盒子是CSS3技術的一種應用,它可以實現動態的盒子旋轉效果,增加網頁的視覺效果。具體實現方法如下:
.box { width: 200px; height: 200px; margin: 50px auto; position: relative; transform-style: preserve-3d; animation: spin 4s linear infinite; } .box .front, .box .back { position: absolute; width: 200px; height: 200px; background-color: #333; } .box .front { z-index: 1; transform: translateZ(100px); } .box .back { transform: rotateY(180deg) translateZ(100px); } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
以上代碼中,.box表示旋轉的盒子,設置了寬高和margin屬性。同時,增加了position:relative屬性和transform-style:preserve-3d屬性,前者是為了后面實現絕對定位的子元素,后面是為了告訴瀏覽器子元素是在3D空間中呈現。
box中包含了兩個絕對定位的子元素,分別是front和back。其中front子元素向前平移100px,back子元素進行180度的Y軸旋轉,并且向前平移100px。兩個子元素的背景顏色都是#333,相對于盒子來說是黑色。這樣設置之后,就可以看到一個黑色的正方形盒子,其中front面朝向屏幕。
最后是設置旋轉的動畫。使用了@keyframes關鍵字,設置了從0度旋轉到360度旋轉的動畫效果,持續時間為4秒,線性運動的形式。在.box的樣式中增加animation屬性,聲明使用spin動畫,并且無限循環。
通過以上設置,一個簡單的CSS3 3D旋轉盒子就實現了。通過調整不同的屬性和數值,可以實現更加豐富的效果,增強網頁的視覺效果。
上一篇mysql查詢表里數據量
下一篇css3 3d旋轉木馬