下面为通过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. 逆向学习-DLL注入

    DLL注入技术,可以实现钩取API,改进程序,修复Bug. DLL注入指的是向运行中的其他进程强制插入特定的DLL文件. DLL注入命令进程自行调用LoadLibrary()API,加载用户指定的DL ...

  2. Angular material mat-icon 资源参考_Connection

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  3. 限制USB延迟启动

    阻止用户从未经授权的位置安装设备驱动程序. 组策略 ...too long too see directly. what determins when a drivers i s  load. spe ...

  4. 剑指offer——链表

    #include"stdio.h" #include"stdlib.h" #include"iostream" using namespac ...

  5. 论文阅读 | RefineDet：Single-Shot Refinement Neural Network for Object Detection

    论文链接:https://arxiv.org/abs/1711.06897 代码链接:https://github.com/sfzhang15/RefineDet 摘要 RefineDet是CVPR ...

  6. Angular  CLI

    简介 ng  官方命令行 Angular  CLI 自己的官方文档 https://github.com/angular/angular-cli/wiki/new 常用代码   临时代码 ng new ...

  7. 使用maven构建多模块项目_记录

    参照孤傲苍狼的博客:https://www.cnblogs.com/xdp-gacl/p/4242221.html 备注:博客中的生成语句,适用于maven3.0.5以上,若为3.0.5以下,则将cr ...

  8. 构建私有Docker Registry

    1.设置insecure-registry: 可能会出现无法push镜像到私有仓库的问题. 这是因为我们启动的registry服务不是安全可信赖的. 1) sudo vim /etc/default/ ...

  9. 关于echar彩色柱状图颜色配置问题

    在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的 思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值 ...

  10. wDatepicker97的用法（点击事件联动）

    1.在使用wdatepicker的时候用户需要选中然后联动其他的下拉,看了插件的文档,研究了一下 <input type="text" id="date" ...