为什么 transform-style: preserve-3d 不起作用？

Question

据我了解，transform-style: preserve-3d; 属性适用于元素，允许在三维space中定位。但是我看不出有和没有 transform-style: preserve-3d; 属性.

有什么区别

所以，我有两个例子。

使用transform-style: preserve-3d;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

.child:hover {
  transform: rotateX(-360deg);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

不使用 transform-style: preserve-3d;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
}

.child:hover {
  transform: rotateX(-360deg);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

那么，有什么区别呢？对我来说，这两个例子看起来是一样的。提前谢谢你

Answer 1

如果您有重叠的元素，

'Preserve-3d' 会对您的示例产生影响。因为 none 的方块实际上是相互重叠的，而是 split-apart - 你看不出有任何区别。

Check this article on CSS-Tricks 它在开头有一个非常 self-explanatory 的示例，包含图像，因此您会看到并理解其中的区别。

为什么 transform-style: preserve-3d 不起作用？

Why doesn't transform-style: preserve-3d work?

html

css

transform