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

先上效果图：

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

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. MySQL数据库存储过程动态表建立(PREPARE)

    PREPARE statement_name FROM sql_text /*定义*/ EXECUTE statement_name [USING variable [,variable...]] / ...

  2. Mina源码阅读笔记（四）—Mina的连接IoConnector2

    接着Mina源码阅读笔记(四)-Mina的连接IoConnector1,,我们继续: AbstractIoAcceptor: 001 package org.apache.mina.core.rewr ...

  3. Linux进程快照相关知识

    查寻内核版本 uname  -a    //  uname  -r 进程快照 ps       report a snapshot of the current processes USER     ...

  4. Oracle创建视图view权限不足问题剖析

    问题: 使用USER1等其他用户登录Oracle以后,创建视图,提示"权限不够",怎么解决? 这是因为USER1这个帐户目前没有创建视图的权限. 解决方法为: 首先使用system ...

  5. C++笔记十七：C语言中 “冒牌货”const和const符号表

      在.c文件中有程序: int main() { int const a = 10; a=20; printf("a=%d\n",a); return 0; } 编译就知道C语言 ...

  6. 每天几分钟跟小猫学前端之node系列：用node实现最简单的爬虫

    先来段求分小视频: https://www.iesdouyin.com/share/video/6550631947750608142/?region=CN&mid=6550632036246 ...

  7. DB2许可证文件

    与 DB2® 数据库产品相关联的许可证文件有两种类型: 基本许可证密钥和 完整许可证密钥.这些许可证密钥以纯文本格式存储,通常称为 许可证文件或 许可证权利证书. "基本"许可证未 ...

  8. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...

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

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

  10. App免费推广途径概要

    说在前面的话:免费其实挺花功夫的,所有的营销的前提是产品和服务是值得推荐的. 1.技术操作维度:ASO,SEO, ASO简单介绍:http://baike.baidu.com/subview/1368 ...