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

先上效果图：

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

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. Understanding the Objective-C Runtime

    Wednesday, January 20, 2010 Understanding the Objective-C Runtime The Objective-C Runtime is one of ...

  2. ruby中顶层定义的方法究竟放在哪里？

    ruby中顶层(top level)中定义的方法放在main中,证明如下: self.private_methods(false) #IN TOP LEVEL 那么methods方法究竟是在哪定义的, ...

  3. Qt5中this application has requested the runtime to terminate it in an unusual way 无法运行问题的解决

    在windows平台使用Qt5.8mingw版写出的程序,在Qt中运行正常,而以release的形式编译并且补充完必要的dll文件后,在其他电脑上运行出现了以下问题: 经过查阅许多资料和亲身实验,终于 ...

  4. fastDFS与Java整合上传下载

    由于项目需要整合个文件管理,选择使用的是fastDFS. 整合使用还是很方便的. 准备 下载fastdfs-client-java源码 源码地址 密码:s3sw 修改pom.xml 第一个plugin ...

  5. Mego(04) - NET简单实现EXCEL导入导出

    前言 相信做过信息系统的朋友都会遇到EXCEL导入导出的相关开发,做过不少EXCEL导入导出后总结起来大致有如下几种方式实现: ADO.NET的OldDb或ODBC连接EXCEL使用DataTable ...

  6. jQuery鼠标移入移出(冒泡版和无冒泡版)

    带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件

  7. Thread.yield和join方法

    参考:http://blog.csdn.net/dabing69221/article/details/17426953 一. Thread.yield( )方法: 使当前线程从执行状态(运行状态)变 ...

  8. jvm栈-运行控制，jvm-堆运行存储共享单元

     JVM-栈 2012-09-17 15:43:53 分类: Java 原文转自:http://www.blogjava.net/nkjava/archive/2012/03/15/371971.ht ...

  9. 数据库scheme设计（9.4 小结）

    通过这一章的内容,希望能够让大家明白一个道理,“数据库系统的性能不是优化出来的,更多的是设计出来的”.数据库Schema 的设计并不如很多人想象的那样只是一个简单的对象对应实现,而是一个系统工程.要想 ...

  10. 有关于二分搜索的常见问题（java实现）

    前言: 二分搜索是一个非常常见的面试题目,它具有非常广泛的用途.熟练的掌握二分搜索的基本形式和他的变式是非常重要的.接下来我们将使用java实现一些常见的有关二分搜索的问题. 具体内容: 1.二分搜索 ...