css - 背面可见性CSS信封动画

我正在尝试制作一个带有透明图像的信封打开动画。襟翼设置为使用animista.net中的swing-top-fwd动画打开。这在某种程度上可行：襟翼会打开。但是皮瓣的内部无法正确渲染。它由两个图像组成，分别是正面（或外部）和背面（或内部）。当信封处于打开状态时，我试图使用CSS backface-visibility使内部显示在外部顶部。这是无效的部分。在Chrome上可以使用...有点-背面显示在顶部，但仅在动画结束后显示。它与襟翼的其余部分无关。在Firefox和IE上，它根本不起作用。 Here it is in action。

这是HTML：

<input type="button" value="Open Envelope" onclick="document.getElementById('flap').className='swing-top-fwd';">
<div style="display:inline-block;position:relative;margin-top:300px;">
    <img src="envelope-base.png">
    <div id="flap">
        <img src="flap-open.png" style="" class="back open">
        <img src="flap-closed.png" class="front closed">
    </div>
</div>

这是CSS：

@-webkit-keyframes swing-top-fwd{0%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-transform-origin:top;transform-origin:top}}@keyframes swing-top-fwd{0%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-transform-origin:top;transform-origin:top}}
.swing-top-fwd {
    -webkit-animation: swing-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    -moz-animation: swing-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: swing-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-top-fwd-reverse {
    -webkit-animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
    -moz-animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
    animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
}

#flap {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#flap .open {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#flap .closed {
    position: relative;
    z-index: 20;
}

最佳答案

z-index令人困惑。我相信您需要做的是翻转信封盖的内部，以便在翻转信封盖时显示它。那句话听起来很有趣。无论如何。

Demo首先，稍后详细。

var flap = document.getElementById('flap');
document.getElementById('toggle').addEventListener('click', function() {
	if (!flap.classList.contains('swing-top-fwd')) {
		flap.classList.add('swing-top-fwd');
  } else {
    flap.classList.toggle('reverse');
  }
});

@keyframes swing-top-fwd {
  0% {
    transform: rotateX(0);
  }

  100%{
    transform: rotateX(180deg);
  }
}

@keyframes swing-top-fwd-reverse {
  0% {
    transform: rotateX(180deg);
  }

  100%{
    transform: rotateX(0deg);
  }
}

.swing-top-fwd {
    animation-name: swing-top-fwd;
}
.swing-top-fwd.reverse {
    animation-name: swing-top-fwd-reverse;
}

#container {
  position: relative;
  width: 405px;
  margin-top: 150px;
  perspective: 1000px;
}

#flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation-duration: 1s;
    animation-fill-mode: both;
    transform-origin: top;
    transform-style: preserve-3d;
}

#flap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
}

#flap img.back {
  transform: rotateY(180deg);
}

<input type="button" value="Toggle Envelope" id="toggle" />
<div id="container">
    <img style="width: 100%;" src="https://i.stack.imgur.com/s3Mwf.png">
    <div id="flap">
        <img src="https://i.stack.imgur.com/W9LGl.png" class="back">
        <img src="https://i.stack.imgur.com/JO2BZ.png" class="front">
    </div>
</div>

为了保留此问题，我已将您的图像上传到StackOverflow's Imgur。

这个想法是我们将信封盖的背面旋转180度。襟翼的正面和背面都为backface-visibility: none;，因此在初始状态下，只有襟翼的正面可见。然后，我们旋转动画中的整个口盖，使其旋转，从而逐渐显示信封口盖的正面。

由于浏览器支持对transforms和animations有利，因此我删除了您拥有的所有供应商前缀。然后，我将您的按钮更改为可切换信封状态的按钮，仅用于测试。我还清理了一些标记并从HTML中提取了JavaScript，但这只是次要的更改。主要思想是：

•backface-visibility: hidden;中图像上的#flap；
•襟翼内侧的transform: rotateY(180deg);；
•襟翼本身的rotateX变换上的动画。

最后，我在容器元素上设置了perspective。由于它实际上变成了3D，因此可以改善动画的外观。您当然可以对其进行调整以更改效果。

这在Linux上的Firefox中对我有效。在Chrome浏览器中，动画是我第一次切换时结结巴巴的，但此后效果却很流畅。我试图通过多种方式对此进行补救，但没有成功。我认为这是一个本地问题，因此它应该可以在所有主要的现代浏览器中使用。

关于css - 背面可见性CSS信封动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43145787/