当做混合开发时，总有各种意想不到的酷炫效果的需求等着你。不过这个还好，先备着方便以后用。

先上效果图：

总结一下：此效果的完成基于以下几个关键点：

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数字圆环的更多相关文章

  1. CSS3.0动画之hover---Y轴----3D旋转

    div#div2{display: table; width: 100%; height: 100%; text-decoration: none; outline: none; -webkit-tr ...

  2. css3加js做一个简单的3D行星运转效果

    前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处 ...

  3. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  4. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  5. 纯CSS3实现牛奶般剔透的3D按钮特效

    今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...

  6. Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果

    如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...

  7. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  8. [ActionScript 3.0] AS3 3D双圆环贴图

    package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.MovieCl ...

  9. 足不出户，一探古今，打造线上3D数字博物馆!

    随着3D技术的不断革新,为了让更多的用户领略历史之美,越来越多的博物馆开始举办线上展览.通过模拟不同的环境.灯光投影.360°无死角放大缩小展品,观众可以享受到身临其境的沉浸体验.不仅如此,给展品加上 ...

随机推荐

  1. SharePoint 部件通过EditorPart自定义属性面板

    需求:编写一个新闻展示的WebPart,要求可以分类,类别是从WebService中获取的字符串,要求可以在属性中勾选分类,显示该分类的信息,分类可能会增加.我要做的就是动态生成属性中的新闻类别,至于 ...

  2. 全面解读Java NIO工作原理(1)

    全面解读Java NIO工作原理(1) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...

  3. 前端mv框架下（目前写的是vue），对组件抽象的思考

    前沿: 抽象是门大学问.前端mv框架中,以组件化的概念为主.经常会考虑抽象到组件级别,进行复用.合理的抽象,能提高效率,减少业务逻辑视图的耦合程度.不合理的抽象,则会增加代码的复杂程度. 遇到的问题 ...

  4. treeview树（利用数据表实现）带展开

    Private Sub Form_Load()'引用C:\windows\system32\MSCOMCTL.OCX,否则提示出错. Dim Rec As New ADODB.Recordset Di ...

  5. windows系统下输入法图标显示设置

    原先任务栏有两个搜狗输入法的标志,还有一个"中/英"的图标:甚至桌面还悬浮这一个搜狗输入法图标. 打开vscode等工具时,桌面悬浮的图标有时可能会遮挡到一些信息,十分不爽. 如今 ...

  6. Hi，这有一份风控体系建设干货

    互联网.移动互联网.云计算.大数据.人工智能.物联网.区块链等技术已经在人类经济生活中扮演越来越重要的角色,技术给人类带来各种便利的同时,很多企业也饱受"硬币"另一面的伤害,并且形 ...

  7. QT https post请求（QNetworkRequest要设置SSL证书，而SSL证书认证有三种）

    因为https访问需要用到SSL认证,而QT默认是不支持SSL认证,所以在使用之前必须先做一些准备工作: 需要安装OpenSSL库: 1.首先打开http://slproweb.com/product ...

  8. Java并发之AQS详解

    一.概述 谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQ ...

  9. 3个简单CSS实现的动态效果

    这里只是鼠标移入的时候出现的动态效果,并没有使用CSS的动画属性animation和变形属性transform.后面再补... HTML代码如下: <!DOCTYPE html><h ...

  10. nginx常用配置系列-虚拟主机

    本来准备详尽的出一份nginx配置讲解,但nginx功能配置繁多,平常使用中使用最多的一般有: 1. 虚拟主机配置 2. HTTPS配置 3. 静态资源处理 4. 反向代理 ============= ...