javascript - CSS 3d 旋转不适用于 Chrome 上的列布局

Question

我需要控制一些 div 在 html 节点中单击的转换。当这些 div 带有显示“inline-block”时，它工作正常，但如果我用 css3 将它们包装在列布局中，它们就不起作用(第一列除外!)

检查这个 fiddle :https://jsfiddle.net/madelavega/hjyntsob/

第一部分，使用栏目布局，只有第一栏有效:点击翻转，然后点击“我工作”，注意CSS悬停样式；在第二列和第三列中，它不起作用。

在第二部分，显示内联 block 工作正常。

我需要列布局，但这似乎是 Chrome 的一个错误，因为它在 Firefox 上运行良好。有人知道吗？

$('.flip').click(function (evt) {
	$(evt.currentTarget).parents('.card').addClass('flipped');
});

$('.i-doesnt-work').click(function (evt) {
	$(evt.currentTarget).parents('.card').removeClass('flipped');
})

/** Column*/
.content {
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;
}

/* Inline-block*/
.content-di {
  display: inline-block;
}

.card {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: red;
  margin: 3px;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
  -moz-transform: translateX( -100% ) rotateY( -180deg );
  -o-transform: translateX( -100% ) rotateY( -180deg );
  transform: translateX( -100% ) rotateY( -180deg );
}

.front {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
 position: absolute;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: visible;
}

.back {
  webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  position: absolute;
  color: #fff;
  height: 100%;
  top: 0px;
  width: 100%;
  background: #000;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: visible;
}

.flip {
  cursor: pointer;
}

.flipped .i-doesnt-work {
  cursor: pointer;
} 

.flipped .i-doesnt-work:hover {
  background: blue;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Column layout</div>
<div class="content">

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

</div>
<div>Display: inline-block</div>
<div class="content-di">
  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>
  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work too!</span>
    </div>
  </div>
    <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
      <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
      <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
</div>

Answer 1

对于任何感兴趣的人，我们已经通过采用不同的方法解决了这个问题(这本身可能是 Chrome 中的错误或我们的误解，因为第一列的行为与其他列不同)。

当我们尝试单击“card”元素内的“back”元素时，当两个元素都绕 Y 轴旋转 180 度时(这意味着，我们试图单击“back”的背面)，就会出现问题实际上显示在“card”元素背面的元素)。

解决方案试图规范化之前的情况:

• 我们不旋转父(“卡片”)元素，而是仅旋转“正面”和“背面”内部 div，遵循更自然的行为。
• 最初，前后元素处于同一位置，正面的 zIndex 大于背面的，背面绕 Y 轴旋转 180º(就像将 2 张纸放在一起，一张 - 正面 - 面向用户，另一个 - 背面 - 面向相反的方向)。
• 当用户点击“翻转”按钮时，我们继续将“翻转”类添加到父(“卡片”)元素，但只有子元素受到影响:我们将“正面”绕 Y 轴旋转 180 度，背面隐藏，现在将“面向屏幕背面”；我们还清除了“向后”的旋转，因此它现在将“面向用户”，并增加其 zIndex。这样我们就可以保持翻转效果，“后退”div 现在位于顶部，面向用户并接收事件。

这是代码( fiddle 可以在下面找到):

.container {
 -webkit-column-count: 4;
  -webkit-column-gap:   10px;
  -moz-column-count:    4;
  -moz-column-gap:      10px;
  column-count:         4;
  column-gap:           10px;
}

.card, .front, .back {
  width: 100px;
  height: 100px;
}

.card {
  display: inline-block;
  position: relative;
}

.card .front,
.card .back {
  position: absolute;
  left: 0; top: 0;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card .front {
  background: #f00;
}

.card .back {
  background: #0f0;
  transform: rotateY(180deg);
}

/** Flipped **/
.card.flipped .front {
  transform: rotateY(180deg);
}

.card.flipped .back {
  z-index: 2;
  transform: rotateY(0);
}

The fiddle in action