当做混合开发时，总有各种意想不到的酷炫效果的需求等着你。不过这个还好，先备着方便以后用。
先上效果图：
总结一下：此效果的完成基于以下几个关键点：
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数字圆环
原文地址：https://www.cnblogs.com/pomelott/p/9074634.html