转载请标明出处：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. mybatis源码之PreparedStatementHandler

    /** * @author Clinton Begin */ public class PreparedStatementHandler extends BaseStatementHandler { ...

  2. PS 滤镜——素描算法（一）

    这个算法结合高斯滤波和图层混合中的颜色减淡模式实现. 可以参考相关博客: http://blog.csdn.net/wsfdl/article/details/7610634 本文增加了一点调色,使得 ...

  3. java--加强之 Java5的线程并发库

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9945499 01. 传统线程技术回顾 创建线程的两种传统方式: 1.在Thread子类覆盖的r ...

  4. 简单了解AJAX

    // ajax的俩个版本: var xmlhttp; if(window.xmlHttpRequest){ xmlhttp = new xmlHttpRequest(); }else{ xmlhttp ...

  5. JVM组成

    java内存组成介绍:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时 ...

  6. P2453 [SDOI2006]最短距离

    题目描述 一种EDIT字母编辑器,它的功能是可以通过不同的变换操作可以把一个源串X [l..m]变换为新的目标串y[1..n].EDIT提供的变换操作有: 源串中的单个字符可被删除(delete): ...

  7. python抽象类+抽象方法实现接口(interface)

    #python没有类似于java和C#的接口类(interface),需要使用抽象类 和抽象方法来实现接口功能 #!/usr/bin/env python#_*_ coding:utf-8 _*_ f ...

  8. Android Studio布局等XML文件怎么改都恢复原状的问题

    编译时,XML布局文件报错,点击链接进去改,怎么改,一编译就恢复原状,这是什么原因,问题出在点击错误链接进的是中间生成XML文件,这个文件改动是没用的,需要改动原始layout文件才会生效.

  9. Django之代码风格

    1 代码风格 稍微关注一下下面这些代码标准风格指导规则将会对你大有益处,我们高度建议你通读词章,即便你此时可能正想跳过它. 1.1 让你的代码保持可读性的重要性 代码在读方面的重要性胜过写.一个代码块 ...

  10. 爬取廖雪峰的python3教程

    从廖雪峰老师的python教程入门的,最近在看python爬虫,入手了一下 代码比较low,没有用到多线程和ip代理池 然后呢,由于robots.txt的限定,构建了一些user-agent,并放慢的 ...