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>
相关推荐
有梦想的刺儿4 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具25 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web