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

先上效果图：

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

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. 十大ios开发者喜爱的开源库

    十大ios开发者喜爱的开源库 (转自博客园) 2014-08-17 14:07:58|  分类: objective-c |  标签:ios  开源库  |举报|字号 订阅 下载LOFTER我的照片书 ...

  2. 和菜鸟一起学产品之用户体验设计UED

    ps:参考产品经理深入浅出ppt

  3. vue2.0-基于elementui换肤[自定义主题]

    0. 直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自 ...

  4. 学习Spring Boot

    Spring boot 是什么 ? 简单说, spring boot 是一个构建项目的工具, 一个脚手架. Spring boot 能干什么? spring boot 做非常少的配置就可以构建生产级别 ...

  5. Quartz.NET 入门教程

    http://www.cnblogs.com/mushroom/p/4067037.html

  6. VirtualBox上安装64位系统

    http://blog.csdn.net/mal327/article/details/6597263 原来VirtualBox安装64位的系统需要满足以下条件: 1.64位的cpu2.安装的系统必须 ...

  7. Android 众多的布局属性详解

    http://www.open-open.com/lib/view/open1328686184311.html Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了 ...

  8. Redis模块化基本介绍

    概要 Redis Modules System基本概念 基本应用 参考资料 1. Redis Modules System基本概念 Redis Modules System是4.0出现一大改动点,使得 ...

  9. Diffie-Hellman密钥协商算法

    一.概述 Diffie-Hellman密钥协商算法主要解决秘钥配送问题,本身并非用来加密用的:该算法其背后有对应数学理论做支撑,简单来讲就是构造一个复杂的计算难题,使得对该问题的求解在现实的时间内无法 ...

  10. ndarray数据类型

    dtype(数据类型)是一个特殊的对象,它含有ndarray将一块内存解释为特定数据类型所需的信息 In [18]: sim1 = np.array([1,2,3],dtype=np.float64) ...