javascript - rotateY(90deg)时如何让div不消失

Question

在我的网页上有一个 div。在那个 div 上，我有模拟 div 被翻转(翻转)的“动画”。

<div id="wrapper">
    <div id="content">
        Some content
    </div>
</div>

我用 jQuery plugin transit 旋转“包装器”div .该插件所做的只是应用 CSS；

transform: rotateY(180deg);

当 div 在 rotateY(90deg) 上时，我必须在 #content div 中加载一些新内容。这需要很少的时间，但在动画中您可以看到 div 在此之前消失/隐藏了。

SEE DEMO FIDDLE(请注意，我没有在此处加载实际内容)

是否有可能在 rotateY(90) 时让俯冲不完全消失？

不幸的是，我无法控制 HTML 本身，因为它正在生成。

Answer 1

尝试增加它的厚度。引用这样的东西:want to show the thickness of an element while it rotate

但是制作css的动画: 0%: 变换: rotateY(0deg); 50%:变换:旋转Y(90度)； 100%:transform: rotateY(180deg);

希望这对您有所帮助。

确保 jQuery 插件有 css 文件或查看它。

您也可以使用基本的 css 和 jQuery 来做到这一点。