css - z-index 丢失直到过渡结束

Question

我一直在使用 rotate3d() 来处理“折叠”元素，但我在折叠一半时遇到了问题 - 在过渡期间，z-index 未得到遵守，但最后，它会弹出到顶部。我怀疑它与 rotate3d() 的 z 部分有关(类似于 here )，但它只发生在两个元素之一上，我不知道有什么区别是。

var button = $('.button');
var open = true;

button.click(() => {
  var right = $('.triangle.topright');
  var left = $('.triangle.topleft');

  if (open) {
    right.addClass('r-close');
    left.addClass('l-close');
  } else {
    right.removeClass('r-close');
    left.removeClass('l-close');
  }

  open = !open;
});

.container {
  box-sizing: border-box;
  display: flex;
  padding: 50px 75px;
  position: relative;
  height: 300px;
  width: 100%;
}

.fold.r-close {
  transform-origin: left;
  transform: rotate3d(0, 1, 0, 90deg);
}

.fold {
  box-sizing: border-box;
  display: inline-block;
  height: 100px;
  width: 100px;
  position: relative;
  transition: all 1.5s;
  transform-style: preserve-3d;
}

.fold.outer {
  width: 150px;
}

.fold.left {
  margin-left: 50px;
}

.triangle {
  height: 0;
  position: absolute;
  transition: all 1.5s;
  width: 0;
}

/* middle */
.triangle.middle {
  top: 0;
  z-index: -1 !important;
}

.triangle.middle.left {
  border-bottom: 100px solid pink;
  border-left: 100px solid transparent;
  right: 0;
}

.triangle.middle.right {
  border-bottom: 100px solid pink;
  border-right: 100px solid transparent;
  left: 0;
}

/* right fold */
.triangle.topright.front {
	border-bottom: 100px solid red;
	border-right: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.topright.back {
  backface-visibility: hidden;
  border-left: 100px solid transparent;
  border-top: 100px solid pink;
  left: -0.6px;
}

/* left fold */
.triangle.topleft.front {
	border-bottom: 100px solid red;
	border-left: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.topleft.back {
  backface-visibility: hidden;
  border-top: 100px solid pink;
  border-right: 100px solid transparent;
  right: -0.6px;
}

/* folds */
.r-close.back {
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.r-close.front {
  transform: rotate3d(1, 1, 0, 0deg);
}

.l-close.back {
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.l-close.front {
  transform: rotate3d(-1, 1, 0, 0deg);
}

.button {
  bottom: 0;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="fold outer">
    <div class="triangle middle left"></div>
    <div class="fold left">
      <div class="triangle topleft front"></div>
      <div class="triangle topleft back"></div>
    </div>
  </div>
  <div class="fold outer">
    <div class="triangle middle right"></div>
    <div class="fold right">
      <div class="triangle topright front"></div>
      <div class="triangle topright back"></div>
    </div>
  </div>
  <button class="button">Click</button>
</div>

https://jsfiddle.net/jonkani/p5858nso/

Answer 1

这种行为是合乎逻辑的，解释起来有点困难，但这是由于旋转方向所致。如果你仔细观察，你会发现右边的部分转向到顶部(考虑 Z 轴)，而左边的部分转向到底部，这就是为什么它在旋转时是隐藏的。

为了纠正这个问题，您需要反转左侧部分的旋转，使其表现得像右侧部分。您需要使用 360deg 而不是 0deg。

var button = $('.button');
var open = true;

button.click(() => {
  var right = $('.triangle.topright');
  var left = $('.triangle.topleft');

  if (open) {
    right.addClass('r-close');
    left.addClass('l-close');
  } else {
    right.removeClass('r-close');
    left.removeClass('l-close');
  }

  open = !open;
});

.container {
  box-sizing: border-box;
  display: flex;
  padding: 50px;
  position: relative;
  width: 100%;
}

.fold.r-close {
  transform-origin: left;
  transform: rotate3d(0, 1, 0, 90deg);
}

.fold {
  box-sizing: border-box;
  display: inline-block;
  height: 100px;
  width: 100px;
  position: relative;
  transition: all 1.5s;
  transform-style: preserve-3d;
}

.fold.outer {
  width: 150px;
}

.fold.left {
  margin-left: 50px;
}

.triangle {
  height: 0;
  position: absolute;
  transition: all 1.5s;
  width: 0;
}

/* middle */
.triangle.middle {
  top: 0;
  z-index: -1 !important;
}

.triangle.middle.left {
  border-bottom: 100px solid pink;
  border-left: 100px solid transparent;
  right: 0;
}

.triangle.middle.right {
  border-bottom: 100px solid pink;
  border-right: 100px solid transparent;
  left: 0;
}

/* right fold */
.triangle.topright.front {
	border-bottom: 100px solid red;
	border-right: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.topright.back {
  backface-visibility: hidden;
  border-left: 100px solid transparent;
  border-top: 100px solid pink;
  left: -0.6px;
}

/* left fold */
.triangle.topleft.front {
	border-bottom: 100px solid red;
	border-left: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.topleft.back {
  backface-visibility: hidden;
  border-top: 100px solid pink;
  border-right: 100px solid transparent;
  right: -0.6px;
}

/* folds */
.r-close.back {
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.r-close.front {
  transform: rotate3d(1, 1, 0, 0deg);
}

.l-close.back {
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.l-close.front {
  transform: rotate3d(-1, 1, 0, 360deg); /*Updated this*/
}

.button {
  bottom: 0;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="fold outer">
    <div class="triangle middle left"></div>
    <div class="fold left">
      <div class="triangle topleft front"></div>
      <div class="triangle topleft back"></div>
    </div>
  </div>
  <div class="fold outer">
    <div class="triangle middle right"></div>
    <div class="fold right">
      <div class="triangle topright front"></div>
      <div class="triangle topright back"></div>
    </div>
  </div>
  <button class="button">Click</button>
</div>