CSS三维旋转;不能在Chrome上使用列布局

CSS 3d rotation doesn't work with column layout on Chrome

本文关键字：布局 Chrome 三维 旋转 不能 CSS      更新时间：2024-03-04

我需要控制在html节点中单击某些div的转换。当这些div带有显示"内联块"时，它可以正常工作，但如果我用css3将它们包装在列布局中，它们就不起作用（除了第一列！）

检查这个小提琴：https://jsfiddle.net/madelavega/hjyntsob/

在第一部分中，使用列布局，只有第一列工作：单击flip，然后单击"i work"，注意CSS悬停样式；在第二列和第三列中，它不起作用。

在第二部分中，通过显示内联块，它可以正常工作

我需要列布局，但它似乎是Chrome的一个bug，因为它在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>

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

当我们试图点击"卡"元素内部的"后"元素时，问题就会发生，当两者都围绕Y轴旋转180度时（这意味着，我们试图点击实际上显示在"卡"元件背面的"后）。

该解决方案试图使以前的情况正常化：

  • 我们不旋转父元素（"card"），而是只旋转"front"answers"back"内部div，遵循更自然的行为
  • 最初，正面和背面元素处于相同的位置，正面的zIndex大于背面，背面绕Y轴旋转180º（就像有两张纸在一起，一张正面面向用户，另一张背面面向相反方向）
  • 当用户点击"Flip"按钮时，我们不断将"flipped"类添加到父元素（"card"）中，但只有子元素受到影响：我们将"front"绕Y轴旋转180度，其背面隐藏，现在它将"面向屏幕背面"；我们还清除了"back"的旋转，因此它现在将"面向用户"，并增加其zIndex。通过这种方式，我们保持了翻转效果，"back"div现在位于顶部，面向用户并接收事件

这是代码（小提琴可以在下面找到）：

.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);
}

小提琴在行动

相关文章：