Question

据我了解，transform-style: preserve-3d;属性适用于该元素，并允许将其放置在三维空间中。但是无论有没有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”将对您的示例产生影响。因为您的正方形实际上没有一个位于彼此之上，而是彼此分开，所以您看不到任何区别。

Check this article on CSS-Tricks它在开始时就有一个非常不言自明的示例，其中包含图像，因此您将看到并理解它们之间的区别。

为什么不转换样式：保留3d效果？

1 个答案: