1、思路分析

第一步：首先需要一个大盒子，承载立方体的六个面；

第二步：立方体的六个面需要3D转化在特定的位置，拼接成一个立方体；

第三步：设置动画；

2、代码实现

第一步：创建div并且设置样式：

    <style>

      .box {

        width: 150px;

        height: 150px;

        background-color: pink;

        margin: 200px auto;

        position: relative;

      }

      .box > div {

        width: 100%;

        height: 100%;

        position: absolute;

        text-align: center;

        line-height: 150px;

        font-size: 20px;

      }

      </style>

    <div class="box">

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

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

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

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

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

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

    </div>

第二步：创建六个面，并且在父元素.box 设置立体效果

transform-style: preserve-3d;

transform: rotateX(45deg) rotateY(45deg);
      .box .front {

        background-color: lawngreen;

        transform: translateZ(75px);

      }

      .box .back {

        background-color: lightcoral;

        transform: translateZ(-75px);

      }

      .box .left {

        background-color: darkmagenta;

        transform: rotateY(-90deg) translateZ(75px);

      }

      .box .right {

        background-color: paleturquoise;

        transform: rotateY(90deg) translateZ(75px);

      }

      .box .top {

        background-color: salmon;

        transform: rotateX(90deg) translateZ(75px);

      }

      .box .bottom {

        background-color: blue;

        transform: rotateX(-90deg) translateZ(75px);

      }

显示效果：

第三步设置动画：

       在.box中设置：animate

      animation: move 5s ease infinite alternate;

      @keyframes move {

        from {

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

        }

        to {

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

        }

      }

3、完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

      .box {

        width: 150px;

        height: 150px;

        background-color: pink;

        margin: 200px auto;

        position: relative;

        transform-style: preserve-3d;

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

        animation: move 5s ease infinite alternate;

      }

      @keyframes move {

        from {

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

        }

        to {

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

        }

      }

      .box > div {

        width: 100%;

        height: 100%;

        position: absolute;

        text-align: center;

        line-height: 150px;

        font-size: 20px;

      }

      .box .front {

        background-color: lawngreen;

        transform: translateZ(75px);

      }

      .box .back {

        background-color: lightcoral;

        transform: translateZ(-75px);

      }

      .box .left {

        background-color: darkmagenta;

        transform: rotateY(-90deg) translateZ(75px);

      }

      .box .right {

        background-color: paleturquoise;

        transform: rotateY(90deg) translateZ(75px);

      }

      .box .top {

        background-color: salmon;

        transform: rotateX(90deg) translateZ(75px);

      }

      .box .bottom {

        background-color: blue;

        transform: rotateX(-90deg) translateZ(75px);

      }

    </style>

</head>

<body>

    <div class="box">

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

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

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

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

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

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

    </div>

</body>

</html>

transform—3D立方体的更多相关文章

  1. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

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

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

  3. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  5. js拖拽3D立方体旋转

    这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...

  6. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  7. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

  8. 仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

    先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默 ...

  9. 3D立方体

    效果图 主要用到的3D属性 1.保留子元素的3d属性:transform-style:preserve-3d; 2.2D变形属性: ①transform:translate()平移,分X轴,Y轴,Z轴 ...

随机推荐

  1. 彻底理解JavaScript中的this

    this 是 JavaScript 语言的一个关键字. 它是函数运行时,在函数体内自动生成的一个对象,只能在函数体内使用. 函数的不同使用场合,this 有不同的值.总的来说,this 就是函数运行时 ...

  2. 记一次 springboot 参数解析 bug调试 HandlerMethodArgumentResolver

    情况描述 前端输入框输入中文的横线 -- ,到后台接收时变成了 &madsh;$mdash 正常应该显示成这样: bug调试思路记录 最开始完全没有向调试源码方面想,试了不少方法,都没解决,没 ...

  3. SpringBoot-配置Java方式

    SpringBoot中使用Java方式配置步骤如下: 在类上加入@Configuration注解,代表作为配置类 在该类方法上加入@Bean注解,代表将方法返回的Bean加入Spring容器 在该类中 ...

  4. Problem B: Bulbs

    Problem B: Bulbs Greg has an m×n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. ...

  5. 史无前例！一季度Facebook移除22亿假账号

    导读 北京时间5月26日上午消息,Facebook表示平台在第一季度移除了22亿虚假账号.这一创纪录的数据显示了这家公司正在与大量试图破坏全球最大社交网络真实性的负面因素进行斗争. 北京时间5月26日 ...

  6. 解决dispatch 后在当前页面不能获取最新的this.props中的数据

    因为dispatch为异步方法  .解决这个问题方法很多  出去添加定时器这种不是很优雅的方法  我们可以用 componentWillReceiveProps(nextProps) 这个生命周期  ...

  7. 157-PHP strrchr函数输出最后一次出现字母p的位置到字符串结尾的所有字符串

    <?php $str='PHP is a very good programming language!'; //定义一个字符串 echo strrchr($str,'o'); //输出最后一次 ...

  8. 在各浏览器和各分辨率下如何让div内的table垂直水平居中？

    本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态. <!DOCTYPE htm ...

  9. xml学习-语法规则

    XML 指可扩展标记语言(eXtensible Markup Language).XML 被设计用来传输和存储数据. XML 语法规则 XML 文档必须有根元素 XML 必须包含根元素,它是所有其他元 ...

  10. 关于SI4432数据手册的简单讲解

    SI4432是高度集成度单芯片无线ISM收发器件.EZRadioPRO系列包括了发射机.接收机和射频收发器,让设计工程师可以有选择的设计利用里面的无线部分. SI4432提供了先进的无线功能,包括连续 ...