<!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. Gh0st木马

    https://www.secrss.com/articles/50209 Gh0st是一种远程控制软件,它可以在被攻击的计算机上运行并允许攻击者远程控制该计算机.为了查找Gh0st的进程.文件.注册 ...

  2. 降低node版本，怎么降低node版本

    降低node版本,怎么降低node版本? 部分老旧项目需要使用低版本的node,网上很多是无效的,高版本无法直接安装低版本node,但是低版本nodejs可以安装部分高版本node,从而达到升级效果. ...

  3. 文心一言 VS 讯飞星火 VS chatgpt （54）-- 算法导论6.2 6题

    文心一言 VS 讯飞星火 VS chatgpt (53)-- 算法导论6.2 5题 六.证明:对一个大小为 n的堆,MAX-HEAPIFY 的最坏情况运行时间为 Ω(Ign).(提示对于n个结点的堆, ...

  4. maven系列：属性管理和版本管理

    目录 一. 属性配置与使用 ①:定义属性 ②:引用属性 二. 资源文件引用属性 ①:定义属性 ②:配置文件中引用属性 ③:开启资源文件目录加载属性的过滤器 ④:配置maven打war包时,忽略web. ...

  5. 优化了MYSQL大量写入问题，老板奖励了1000块给我

    摘要:大家提到Mysql的性能优化都是注重于优化sql以及索引来提升查询性能,大多数产品或者网站面临的更多的高并发数据读取问题.然而在大量写入数据场景该如何优化呢? 今天这里主要给大家介绍,在有大量写 ...

  6. 一文解析Spring JDBC Template的使用指导

    摘要:Spring框架对JDBC的简单封装.提供了一个JDBCTemplate对象简化JDBC的开发. 本文分享自华为云社区<Spring JdbcTemplate使用解析>,作者: 共饮 ...

  7. 2022 IDC中国未来企业大奖优秀奖颁布，华为云数据库助力德邦快递获奖

    摘要:华为云数据库助力德邦快递打造的"基于数智融合的一站式物流供应链平台"项目从500多个项目中脱颖而出,荣获2022 IDC中国未来企业大奖优秀奖"未来智能领军者&qu ...

  8. CANN 5.0黑科技解密 | 算力虚拟化，让AI算力“物尽其用”

    摘要:算力虚拟化技术对消费者而言,可有效降低算力的使用成本,对于设备商或运营商而言,则可极大提升算力资源的利用率,降低设备运营成本. 为什么要做算力虚拟化 近年来,人工智能领域呈井喷式发展,算力就是生 ...

  9. Redisson：这么强大的实现分布式锁框架，你还没有？

    摘要:Redisson框架十分强大,基于Redisson框架可以实现几乎你能想到的所有类型的分布式锁. 本文分享自华为云社区<[高并发]你知道吗?大家都在使用Redisson实现分布式锁了!!& ...

  10. 火山引擎 LAS Spark 升级：揭秘 Bucket 优化技术

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 文章介绍了 Bucket 优化技术及其在实际业务中的应用,包括 Spark Bucket 的基本原理,重点阐述了火 ...