转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34120047

创意来自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ， 同学给我发的例子，感觉很不错，不过实在想不出来实际的用处，但是效果很炫~

效果图：

知识点：

1、perspective ，transform 的复习

2、css3 backgroud实现格格背景，即面上的小格格

3、 @-webkit-keyframes 实现动画

HTML：

<body>

<div class="stage">

    <div class="cube">

        <div class="font"></div>

        <div class="back"></div>

        <div class="left"></div>

        <div class="right"></div>

        <div class="top"></div>

        <div class="bottom"></div>

    </div>

</div>

</body>

前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。

CSS：

 html

        {

            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);

            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);

            height: 100%;

        }

        .stage

        {

            -webkit-perspective: 1000px;

            width: 20em;

            height: 20em;

            left: 50%;

            top: 50%;

            margin-left: -10em;

            margin-top: -10em;

            position: absolute;

        }

        .cube

        {

            position: absolute;

            width: 100%;

            height: 100%;

            -webkit-transform-style: preserve-3d;

            -webkit-transform: rotateX(-20deg) rotateY(-20deg);

        }

        .cube *

        {

            background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);

            -webkit-background-size: 2.5em 2.5em;

            background-color: rgba(0, 0, 0, 0.5);

            position: absolute;

            width: 100%;

            height: 100%;

            border: 2px solid rgba(54, 226, 248, 0.5);

            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);

        }

        .font

        {

            -webkit-transform: translateZ(10em);

        }

        .back

        {

            -webkit-transform: rotateX(180deg) translateZ(10em);

        }

        .left

        {

            -webkit-transform: rotateY(-90deg) translateZ(10em);

        }

        .right

        {

            -webkit-transform: rotateY(90deg) translateZ(10em);

        }

        .top

        {

            -webkit-transform: rotateX(90deg) translateZ(10em);

        }

        .bottom

        {

            -webkit-transform: rotateX(-90deg) translateZ(10em);

        }

同样：stage作为舞台，cube设置子元素的效果为3d，然后每个面都进行旋转和设置translateZ然后形成立方体。

为每个面设置backgroud设置小格格的代码：

     background: -webkit-linear-gradient(

                left,

                rgba(54, 226, 248, 0.5) 0px,

                rgba(54, 226, 248, 0.5) 3px,

                rgba(0, 0, 0, 0) 0px),

                        -webkit-linear-gradient(

                top,

                rgba(54, 226, 248, 0.5) 0px,

                rgba(54, 226, 248, 0.5) 3px,

                rgba(0, 0, 0, 0) 0px);

            -webkit-background-size: 2.5em 2.5em;

背景设置，从左到右的3像素的条条，从上到下的3像素的条条；然后设置背景大小为2.5em 2.5em ，然后将背景重复显示，效果如下（我添加了边框）：

现在的完整效果：

可以看到立方体已经成型了，最后添加上动画就行了，不要觉得动画很复杂，其实很简单~

定义一个动画帧：

 @-webkit-keyframes spin

        {

            from

            {

                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

                transform: translateZ(-10em) rotateX(0) rotateY(0deg);

            }

            to

            {

                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

            }

        }

名字为spin，开始时 translateZ(-10em) rotateX(0) rotateY(0deg); 结束时 ： translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同时绕着x,y轴360度旋转。

最后给我们的立方体加上此animation属性：

  .cube

        {

            -webkit-animation: 6s spin linear infinite;

            position: absolute;

            width: 100%;

            height: 100%;

            -webkit-transform-style: preserve-3d;

            -webkit-transform: rotateX(-20deg) rotateY(-20deg);

        }

设置时间为动画时间 6s , 动画 spin , 速度为匀速linear , 无限循环 infinite ；

关于更加细致的参数设置，可以参考w3cSchool~以后我也会写单独介绍CSS3的属性的博客~

好了，最终的效果就已经完成了~

对于原网站的样子，有点细微的差别：

因为它额外给每个面添加了一个径向渐变，那么我们添加上：

    .cube *:before

        {

            display: block;

            background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);

            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);

            content: '';

            height: 100%;

            width: 100%;

            position: absolute;

        }

利用before这个伪元素，然后设置径向渐变~~现在终于一致了~

源码点击下载

版权声明：本文为博主原创文章，未经博主允许不得转载。

HTML5 CSS3 诱人的实例： 3D立方体旋转动画的更多相关文章

  1. HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  2. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  3. HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等

    今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  4. HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能

    一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还 ...

  5. jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

    <!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...

  6. 3D立方体旋转动画

    在线演示 本地下载

  7. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. css3-实现3D立方体旋转

    核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...

随机推荐

  1. 有关java的引用传递，直接操作对象本身。直接删除BE的value中某值

    HashSet<String> refRegions = BE.get(regionName);    HashSet<String> values = new HashSet ...

  2. XMPP系列(二)----用户注册和用户登录功能

    1.创建一个新工程 2.导入XMPP框架 最新的XMPP框架下载地址:https://github.com/robbiehanson/XMPPFramework 将XMPP的几个文件夹拖进工程中,需要 ...

  3. 【Android 应用开发】Android之Bluetooth编程

    Android Bluetopth 编程大牛文章 http://my.oschina.net/u/994235/blog?catalog=313604 ViewGroup 相关资料 : http:// ...

  4. 最新App Store审核10大被拒理由

    最近,苹果在官网给出了截至2015年2月份应用被拒绝的十大理由,其中50%以上的应用被拒绝都是因为这10个原因,其中7个理由和2014年相同,其中排名前三的原因分别是:需要补充更多信息.存在明显的bu ...

  5. How--to-deploy-smart-contracts-on

    The following smart contract code is only an example and is NOT to be used in Production systems. pr ...

  6. mysql6.5 操作日志

    创建用户并授权 grant all privileges on database.* to user@localhost identified by '123456'; flush privilege ...

  7. IT轮子系列（一）——DropDownList 的绑定（二）

    补记: 今天在阅读公司项目代码的时候,发现MVC中的dropdownlist已经封装了数据绑定方式.相对于第一篇文章,这样的方式更简便.简洁.现记录如下: 首先,创建我们的数据模型 如下图: 模型代码 ...

  8. JDK 源码分析（4）—— HashMap/LinkedHashMap/Hashtable

    JDK 源码分析(4)-- HashMap/LinkedHashMap/Hashtable HashMap HashMap采用的是哈希算法+链表冲突解决,table的大小永远为2次幂,因为在初始化的时 ...

  9. 函数上下文this

    一般来说谁调用上下文都指向谁,具体有以下几种情况: 1.函数用圆括号调用,函数的上下文是window 注意:所有的全局变量都是window的属性,而函数里边定义的变量谁的属性也不是. 2.函数作为对象 ...

  10. HTML 返回顶部

    每次看淘宝,看微信,都回有回到顶部的小logo,小图标,或者双击返回顶部.所以就学习了如何返回顶部的操作,一开始是联想html中的链接描点,在开头出设置个标签,下面点击另外一个标志回去.有三种觉得比较 ...