<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>3D Sunstance (Substantial) cube</title>

    <style>

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }

      body {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        width: 100%;

        height: 100vh;

        background: #606060;

        /* 视角，必须开视角才可以看到旋转位移的3D属性 */

        perspective: 500px;

        overflow: hidden;

      }

      .main {

        position: relative;

        width: 200px;

        height: 200px;

        margin: 0 auto;

        margin-top: 200px;

        /*

          必须声明 transform-style:preserve-3d 才可以展示3D属性的变化

          因为其默认 2d ,transform-style:flat

        */

        transform-style:preserve-3d;

          animation:run 10s infinite;

      }

      .box {

        width: 200px;

        height: 200px;

        background-color: #f9bf3b;

        display: grid;

        place-items: center;

        font-size: 50px;

        position: absolute;

        opacity: 0.6;

      }

      .box:first-child {

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

      }

      .box:nth-child(2) {

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

        background-color: #8e44ad;

      }

      .box:nth-child(3) {

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

        background-color: #22a7f0;

      }

      .box:nth-child(4) {

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

        background-color: #ffa27b;

      }

      .box:nth-child(5) {

        transform: rotateX(180deg) translateZ(100px);

        background-color: #e74c3c;

        z-index: -1;

      }

      .box:nth-child(6) {

        transform: rotateY(0deg) translateZ(100px);

        background-color: #ecf0f1;

      }

      @keyframes run {

        0% {

          transform: rotateY(0);

        }

        10% {

          transform: rotateY(180deg);

        }

        20% {

          transform: rotateX(180deg);

          /* transform: rotateY(180deg); */

        }

      }

    </style>

  </head>

  <body>

    <div class="main">

      <div class="box">右</div>

      <div class="box">左</div>

      <div class="box">上</div>

      <div class="box">下</div>

      <div class="box">后</div>

      <div class="box">前</div>

    </div>

  </body>

</html>

CSS 动画 ： 创建 3D 立方体的更多相关文章

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

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

  2. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  3. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  4. CSS动画实例：3D立方体

    CSS3支持3D转换,与3D转换有关的属性有: transform:向元素应用 2D或3D 转换. transform-origin:改变被转换元素的位置. transform-style:规定被嵌套 ...

  5. CSS动画，2D和3D模块

    CSS3提供了丰富的动画类属性,使我们可以不通过flash甚至JavaScript,就能实现很多动态的效果.它们主要分为三大类:transform(变换),transition(过渡),animati ...

  6. html + css 01: 3d立方体

    html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...

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

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

  8. 纯CSS绘制3D立方体

    本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...

  9. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  10. Mac原型动画设计软件Drama创建3D图层的注意事项，你知道吗？

    Drama创建3D图层的注意事项:要跨层保留3D空间,可以使用组.它们具有保留子图层和嵌套组的3D空间的特殊功能. Drama支持通过在三维空间中定位和旋转2D图层来创建3D内容.要在3D空间中定位图 ...

随机推荐

  1. Android移动、缩放和旋转手势实现

    Android的部分图片编辑应用中需要对图片进行移动.缩放和旋转,这些变化都依赖于触摸手势实现,而本文主要阐述移动.缩放和旋转手势的简单实现. 一.移动 首先需要从触摸事件(MotionEvent)中 ...

  2. STM32CubeMX教程2 GPIO输出 - 点亮LED灯

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  3. 一文了解 Kubernetes

    一文了解 Kubernetes 简介:Docker 虽好用,但面对强大的集群,成千上万的容器,突然感觉不香了.这时候就需要我们的主角 Kubernetes 上场了,先来了解一下 Kubernetes ...

  4. 我的第一个JavaWeb程序!!!

  5. Spring Boot3 系列：Spring Boot3 跨域配置 Cors

    目录 什么是CORS? Spring Boot 如何配置CORS? 前端代码 注解配置 全局配置 过滤器配置 注意事项 什么是CORS? CORS,全称是"跨源资源共享"(Cros ...

  6. EDS从小白到专家丨打造你的专属“数据物流”系统

    "数据快递"如何支撑便捷就医?本期让我们来了解如何使用EDS打造专属的"数据物流"系统...... 本文分享自华为云社区<[EDS从小白到专家]第2期-E ...

  7. 一文为你详解Unique SQL原理和应用

    摘要:以一定的算法结合解析树中的各结点,计算出来一个整数值,用来唯一标识这一类SQL,这个整数值被称为Unique SQL ID,Unique SQL ID相同的SQL语句属于同一个"Uni ...

  8. 想学AI开发很简单：只要你会复制粘贴

    摘要:本次实践基于 mobilenetV2 实现猫狗图像分类,贯穿了数据集获取及处理.预训练模型微调及迁移.端侧部署及推理等环节和知识点,体会到了 MindSpore 简单的开发体验和全场景快速部署的 ...

  9. Python 没有函数重载？如何用装饰器实现函数重载？

    摘要:Python 不支持函数重载.当我们定义了多个同名的函数时,后面的函数总是会覆盖前面的函数,因此,在一个命名空间中,每个函数名仅会有一个登记项(entry). 本文分享自华为云社区<为什么 ...

  10. Java注解(批注)的基本原理

    为什么要使用注解? 早期版本的Spring是通过XML文件的形式对整个框架进行配置的,一个缩减版的配置文件如下 <?xml version="1.0" encoding=&q ...