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

先上效果图：

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

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. 关于getchar函数缓冲区的问题

    最近,看到有同学问我关于getchar()这个函数缓冲区的问题,结合我以前的学习,我将对getchar()进行一次总结,当然,这些都是别人已经提过的东西,我只是总结,接下来我们来看看. 首先,用get ...

  2. nasm预处理器(3)

    nasm提供一个限定符.nolist,可以包含它到一个宏定义中,这样该宏就不会在列表文件中被展开:限定符 .nolist直接放到参数后面: %macro foo 1.nolist 条件汇编 和C预处理 ...

  3. erb自动生成html页面一例

    原来的html蛮长的,源代码如下: <html> <head> <style type="text/css"> ul.none {list-st ...

  4. ruby和linux shell共同编程的示例

    有了shell为毛还要ruby呢?话不能这么说,有些小功能用ruby还是很方便的,比如说字符串的反转再加1功能用shell来写就比较麻烦.str="123456",我们定义一个反转 ...

  5. Object对象你真理解了吗？

    前言 五一回家又断更了一个放假时间了~~~ 只有光头才能变强 回顾前面: ThreadLocal就是这么简单 多线程三分钟就可以入个门了! 多线程基础必要知识点!看了学习多线程事半功倍 Java锁机制 ...

  6. PowerBI开发 第十篇：R 脚本

    R是一种专门用于数据分析和统计的脚本语言,广泛应用在每一个需要统计和数据分析的领域.PowerBI支持R脚本,只不过,PowerBI Desktop默认没有安装R.在使用R脚本之前,必须向PowerB ...

  7. IndexedDB，FileSystem- 前端数据库，文件管理系统

    "我们不再需要下载并且安装软件.一个简单的web浏览器和一个可供使用的互联网就足以让我们在任何时间, 任何地点, 还有任何平台上使用任何web应用程序." web应用很酷, 但是相 ...

  8. 发现DELL笔记本一个很弱智的问题

    以前用联想的笔记本,最近联想笔记本坏了,用的是公司的DELL笔记本,发现DELL笔记本一个很弱智的问题. 关于禁用触摸板的问题. 起因: 由于要经常写程序,我配置的有有线鼠标,但是打字时经常碰到触摸板 ...

  9. classes目录中没有class文件的一个原因

    可能是你的build设置有问题:比如本来有的jar被删除的情况下.build不会报错,但是classes目录下什么都没有.

  10. Java 包装类笔记

    @(JDK)[包装类] Java 包装类笔记 当需要使用到集合的时候,如果是基础数据类型,需要转换为包装类,再使用,在JDK1.5之前,每次使用的时候,都需要手动转换为包装类(称为装箱),然后在使用的 ...