CSS3實現軸心為x軸的3D數字圓環
阿新 • • 發佈：2018-05-23
str 頁面 rotate 屬性設置 pad box strong splay block
當做混合開發時，總有各種意想不到的酷炫效果的需求等著你。不過這個還好，先備著方便以後用。
先上效果圖：
總結一下：此效果的完成基於以下幾個關鍵點：
1.DOM結構，為每個DIV設置旋轉後，一次也會影響到內層的結構，也就意為越往內層旋轉的角度越大。平分下來只需要給div設置一個36deg的旋轉就OK了，最內層的9號DIV正好旋轉一圈。
2.perspective屬性設置景深效果
3. z軸旋轉中心的計算（可以通過側截面的平面圖算出紅線的一半約為153px，對應到屬性上也就是 transform-origin: center center -153px;）
整個頁面的代碼貼一下，有興趣的可以自己運行一下。這裏的html為動態生成的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } #circle-box{ width: 100px; height: 100px; margin: 200px auto; perspective: 800px; transform-style: preserve-3d; } #circle-box div{ width: 100px; height: 100px; position: absolute; top: 0px; box-sizing: border-box; -webkit-transform: rotateX(-36deg); -ms-transform: rotateX(-36deg); -o-transform: rotateX(-36deg); transform: rotateX(-36deg); transform-style: preserve-3d; transform-origin: center center -153px; } #circle-box>div{ -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; transform-style: preserve-3d; } #circle-box div:first-child{ top: 0; } #circle-box{ width: 100px; height: 100px; } #circle-box span{ position: relative; display: block; width: 100px; height: 100px; background: #eee; color: #333; top: 0; left: 0; line-height:100px; text-align: center; font-size: 50px; border: 1px solid #ccc; box-sizing: border-box; } #circle-box:hover>div{ -webkit-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); } </style> </head> <body> <div id="circle-box"> </div> <script type="text/javascript"> function genCircle () { var html = ""; var section = ‘<div><span>0</span></div>‘ for(var i = 0; i<10; i++) { html = ‘<div><span>‘+ (9-i) +‘</span>‘+ html +‘</div>‘ } document.getElementById("circle-box").innerHTML = html; } window.onload = function () { genCircle(); } </script> </body> </html>
CSS3實現軸心為x軸的3D數字圓環