Question

我正在尝试使用透明图像制作信封打开动画。翻盖设置为使用来自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;
}

Answer 1

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包络动画

1 个答案: