HTML(29)——立体呈现

作用:设置元素的子元素是位于3D空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于3D空间

步骤:

  1. 父级元素添加 transform-style:preserve-3d
  2. 子级定位
  3. 调整子盒子的位置(位移或旋转)

演示:

复制代码
  <style>
    .cube {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: rgb(106, 220, 116);
      transition: all 2s;
    }

    .cube div {
      width: 200px;
      height: 200px;
    }

    .front {
      background-color: #2180d4;
    }

    .back {
      background-color: #dd1e1e;
    }
  </style>
</head>

<body>
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</body>

按照步骤父级添加transform-style: preserve-3d; 为了更好的视觉效果我又添加了视距transform-style: preserve-3d; 然后根据子绝父相 原则给它们定位,最后**transform: translateZ(80px)**将两个盒子分开,添加一个旋转的效果使其更明显。

复制代码
  <style>
    .cube {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: rgb(106, 220, 116);
      transition: all 2s;
      transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .cube div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
    }

    .front {
      background-color: #2180d4;
      transform: translateZ(80px);
    }

    .back {
      background-color: #dd1e1e;
    }

    .cube:hover {
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>
相关推荐
lilye6615 分钟前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析
前端 贾公子37 分钟前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
开始编程吧1 小时前
【HarmonyOS5】鸿蒙×React Native:跨端电商应用的「双引擎」驱动实践
前端
m0_746177191 小时前
小白进阶shell学习-----脚本实战案例
前端·chrome·学习
半碗水1 小时前
缝缝补补
前端·javascript
空城机1 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js
BigTopOne1 小时前
【ijkplayer】 如何降低直播延迟?
前端
curdcv_po1 小时前
js 中 call、apply、bind 方法的原理与应用
前端
咔咔库奇1 小时前
axios取消请求
开发语言·前端·javascript
不锋1 小时前
van-uploader组件动态设置capture属性不生效问题
前端