z-index丢失直到过渡结束

Question

我一直在使用rotate3d()来玩“折叠”元素，我遇到了一半问题 - 在转换期间，z-index不受尊重，但最后，它突然出现在顶部。我怀疑它与rotate3d()的z部分有关（类似于here），但它只发生在两个元素中的一个上，我无法弄清楚它们之间的区别。 / p>

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轴）但左边的部分转向到底部为什么它在旋转时隐藏起来。

为了纠正这个问题，您需要反转左侧部分的旋转，使其行为与右侧部分相同。而不是0deg，您需要使用360deg。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;