Question

注意： CSS位于codepen示例中

语境：我想将一组元素（让我们称之为父元素）旋转为一列。每位家长有2个孩子（2张脸：正面和背面）。

<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<br />
<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<!-- many more -->

动画将在以后用JavaScript添加，并且出于问题的目的，假设将有10列10行，并且在一些Android手机中使用一些糟糕的浏览器旋转100个元素肯定会看起来奇。

我想避免的是将旋转动画添加到每个“父”，因为我知道每个动画都不会同时开始。

MY SOLUTION：我为每个列（称为旋转器）创建了一个容器元素，只需要旋转该元素，所有“父”元素将同时旋转。它有效，我知道它有更好的性能。

<!-- one column -->
<div class="rotator">
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <br />
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <!-- many more -->
</div>

问题：问题是背面可见性仅在我旋转“父”元素时才有效。如果我旋转“旋转器”元素，我只能看到“背面”但不能看到正面。

Here 是旋转器的解决方案，这是有问题的解决方案。

here 是没有旋转器的工作示例，这是我想要实现但使用旋转器。

问题：如何使用rotator元素仍然可以让背面可见性按预期工作？

Answer 1

您需要设置保留3d才能使此布局正常工作

.rotator {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;  
    width: 10em;
    height: 10em;
    transform-style: preserve-3d;   /* added */
}

codepen

Answer 2

我觉得，因为你的back和front div位于.parent div内，所以除非并且直到你为它提供动画，否则它实际上不会旋转div。因此，您需要将动画属性添加到.parent，如下所示。

.parent {
  position: relative;
  width: 10em;
  height: 10em;
  -webkit-transform-style: preserve-3d;
   -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  transform-style: preserve-3d;
}

以下是 DEMO

旋转元素的大孩子的CSS3背面可见性

2 个答案: