纯CSS实现立方体旋转

时间：2023-02-17 21:29:11

下面为通过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实现立方体旋转

纯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&period;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&period;纯 CSS 创作一个矩形旋转 loader 特效

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

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

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

随机推荐

  1. hduoj 3459 Rubik 2&&num;215&semi;2&&num;215&semi;2

    http://acm.hdu.edu.cn/showproblem.php?pid=3459 Rubik 2×2×2 Time Limit: 10000/5000 MS (Java/Others)   ...

  2. Innodb引擎 compact模式下元组的磁盘存储结构

    可变字符串长度:可变字符串长度: null vector 元组头(5个字节) 主键 trx id (6个字节) rollback pointer( 7个字节 ) 可变字符串 可变字符串   有了这个后 ...

  3. 简单好用的日志管理工具 Logrotate

    前言 日志就像程序的生命记录仪,详细记录下了程序运行的点点滴滴. 慎重的选择记录哪些日志:在茫茫日志海中寻找真正记录问题的日志,你是不想经历的: 精心的定时压缩转移日志:故障发生了,日志却丢了,此时的 ...

  4. linux下防火墙开启某个端口号及防火墙常用命令使用

    linux防火墙常用命令 1.永久性生效,重启后不会复原 开启:chkconfigiptables on 关闭:chkconfigiptables off 2.即时生效,重启后复原 重启防火墙 方式一 ...

  5. 批量硬关联本地AD帐号与Office云端帐号

    世纪互联给的方案, 说只能一个一个做硬匹配, 把我吓尿了. 我整个简单的, 还能批量做. 1. 将本地域中所有用户的这两个属性导出. Get-ADUser -Filter * -SearchBase ...

  6. json中关于jo&period;&lbrack;&rsqb;中字符串一致的问题

    procedure TForm1.btn1Click(Sender: TObject);var jo:ISuperObject; Temp:string; temp1:Boolean;begin  j ...

  7. Servlet&lowbar;note

    2015/8/24 Web项目目录结构:总目录my,中有WEB-INF目录,中有classes.lib两目录和web.xml文件.classes保存编译好的java文件,lib保存库文件,web.xm ...

  8. EPPlus实战篇——Excel写入

    .net core 项目 可以向excel写入任何类型(T)的数据,只要T中的field的[Display(Name = "1233", Description = "# ...

  9. k8s-pod的生命周期

    1.pod资源-spec.containers - name:镜像运行起来之后叫容器,该字段为容器名 image:镜像名字 imagePullPolicy:表示从哪拉取镜像, Always:不管本地有 ...

  10. 大数据学习——hive的sql练习题

    ABC三个hive表 每个表中都只有一列int类型且列名相同,求三个表中互不重复的数 create table a(age int) row format delimited fields termi ...

相关文章