下面为通过CSS动画实现的立方体旋转，可以改变CSS代码中关键帧定义（@keyframes）来改变立方体的旋转方式

HTML部分：

<body class="body">

  <div class="rect-wrap">   <!-- //舞台元素，设置perspective，让其子元素获得透视效果。 -->

    <div class="container">    <!-- //容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现 -->

        <div class="top slide">1</div>   <!-- //立方体的六个面 -->

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

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

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

        <div class="front slide">5</div>

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

    </div>

  </div>

</body>

CSS部分：

<style>

      .rect-wrap {

        position: relative;

        perspective: 2000px;

      }

      .container {

        width: 400px;

        height: 400px;

        transform-style: preserve-3d;

        transform-origin: 50% 50% 100px;  /* //设置3d空间的原点在平面中心再向Z轴移动200px的位置 */

        /* left: 50%;

        margin-left: -200px; */

        top: 100px;

      }

      .slide {

        width: 200px;

        height: 200px;

        position: absolute;

        background: #000;

        line-height: 200px;

        text-align: center;

        color: #fff;

        font-size: 30px;

        font-weight: bold;

      }

      .top {

        left: 100px;

        top: -100px;

        transform: rotateX(-90deg);

        transform-origin: bottom;

        background: red;

      }

      .bottom {

        left: 100px;

        bottom: -100px;

        transform: rotateX(90deg);

        transform-origin: top;

        background: grey;

      }

      .left {

        left: -100px;

        bottom: 100px;

        transform: rotateY(90deg);

        transform-origin: right;

        background: green;

      }

      .right {

        left: 300px;

        bottom: 100px;

        transform: rotateY(-90deg);

        transform-origin: left;

        background: yellow;

      }

      .front {

        left: 100px;

        top: 100px;

        transform: translateZ(200px);

        background: black;

      }

      .back {

        left: 100px;

        top: 100px;

        transform: translateZ(0);;

        background: blue;

      }

      @keyframes rotate-frame {

        0% {

            transform: rotateX(0deg) rotateY(0deg);

        }

        10% {

            transform: rotateX(0deg) rotateY(180deg);

        }

        20% {

            transform: rotateX(-180deg) rotateY(180deg);

        }

        30% {

            transform: rotateX(-360deg) rotateY(180deg);

        }

        40% {

            transform: rotateX(-360deg) rotateY(360deg);

        }

        50% {

            transform: rotateX(-180deg) rotateY(360deg);

        }

        60% {

            transform: rotateX(90deg) rotateY(180deg);

        }

        70% {

            transform: rotateX(0) rotateY(180deg);

        }

        80% {

            transform: rotateX(90deg) rotateY(90deg);

        }

        90% {

            transform: rotateX(90deg) rotateY(0);

        }

        100% {

            transform: rotateX(0) rotateY(0);

        }

      }

      .container{

        animation: rotate-frame 30s linear infinite;

      }

    </style>

以上代码实现的效果如下：

纯CSS实现立方体旋转的更多相关文章

  1. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  3. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  4. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  5. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  6. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  7. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  8. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  9. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

随机推荐

  1. ghj1222被坑记录[不持续更新]

    考试注意事项:link1 link2 (密码:wangle) 调不出来bug,可以先透彻一会儿或者是上个厕所或者坐一会别的题(间隔至少20min),然后通读代码 -1. 考试先读题,读题之后搞出一个做 ...

  2. Cache缓存设计

    缓存的适用场景: 缓存的目的是提高访问速度,减少不必要的开销,提高性能.那什么样的场景适用于缓存呢.试想一个多项式的计算是一个CPU bound的操作,如果频繁调用同一个多项式的结果.显然缓存结果是一 ...

  3. sqlalchemy中使用event设置条件触发短信与邮件通知

    一.原因 近期在做短信与邮件通知系统.使用到了这一块.例如,当订单完成以后进行邮件短信的通知.虽然可以采用直接调用接口的方式实现,但有几个原因让我希望使用条件触发的方式 1.由于系统中支持线上线下以及 ...

  4. js 正则表达式（reg）

    一.RegExp对象方法: 1.exec()   检索字符串中指定的值,并返回值(找不到返回null) 效果: <textarea name="content" id=&qu ...

  5. vue中vueRouter使用

    首先需要安装依赖:

  6. pycharm下运行unittest的问题

    环境: 系统:window7 64 软件:pycharm 版本:2016.3.2 问题描述: 使用unittest类的时候出现问题,问题截图如下 Pycharm 2016.2执行单元测试遇到如下问题: ...

  7. python高级——目录

    目  录 python高级(一)—— python数据模型(特殊方法) python高级(二)—— python内置序列类型 python高级(三)—— 字典和集合(泛映射类型) python高级(四 ...

  8. js中报错"Maximum call stack size exceeded"解决方法

    Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...

  9. UUID生成工具

    public class UUIDUtils { private static SecureRandom SEEDER_STATIC = null; private static byte[] ADD ...

  10. 06-oracle 通用函数

    --nvl(数字|列名,默认值) 数字或列的值为null显示为0,不为null时显示原值 --nvl2(comm,comm,0)如果comm不为null则显示comm,为null则显示0 --null ...