使用 transform translate 创建 3d 效果答案

【问题标题】：Using transform translate to create a 3d affect使用 transform translate 创建 3d 效果
【发布时间】：2022-02-04 06:31:54
【问题描述】：

我无法使用transform: translateZ 更改后置 div 的位置以创建 3d 效果。图像完全没有变化。我已经使用透视和透视原点来尝试创建 3d 效果。 front 和 back div 分别是立方体的正面和背面。下面是分别用css和html编写的代码

:root {
  --boxColor: #0ff7
}

body {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: black;
  min-height: 100vh;
  font-size: 50px;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
}

.cube-container {
  perspective: 100px;
  perspective-origin: 50% 0%;
}

.cube {
  height: 100px;
  width: 100px;
}

.front {
  height: 100px;
  width: 100px;
  background: rgb(62, 86, 226);
  opacity: 0.5;
}

.back {
  height: 100px;
  width: 100px;
  background: rgb(62, 86, 226);
  opacity: 0.5;
  top: -100vh;
  position: absolute;
  transform: translateZ(100px)
}

<div class="scene">
  <div class="cube-container">
    <div class="cube">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <div class="bottom">
      </div>
      <div class="left">
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css css-transforms translate

【解决方案1】：

您在.cube 上错过了transform-style: preserve-3d;，我也将position: absolute; 用于.front。我不完全理解这个观点，但通常使用更高的数字，例如：perspective: 500px;。

希望对您有所帮助！ :)

:root {
  --boxColor: #0ff7
}

body {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: black;
  min-height: 100vh;
  font-size: 50px;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
}

.cube-container {
  perspective: 500px;
  perspective-origin: 50% 0%;
}

.cube {
  height: 100px;
  width: 100px;
  transform-style: preserve-3d; 
  transform: rotateY(20deg);

}

.front {
  position:absolute;
  height: 100px;
  width: 100px;
  background: red;
  opacity: 0.5;
}

.back {
  position: absolute;
  height: 100px;
  width: 100px;
  background: blue;
  opacity: 0.9;
  transform: translateZ(-100px);
}

<div class="scene">
  <div class="cube-container">
    <div class="cube">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <div class="bottom">
      </div>
      <div class="left">
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</div>

【讨论】：