旋转时如何使div不消失（90度）答案

【问题标题】：How to make the div not dissapear when rotateY(90deg)旋转时如何使div不消失（90度）
【发布时间】：2016-12-31 06:46:24
【问题描述】：

在我的网页上，我有一个 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 本身，因为它正在生成。

【问题讨论】：

你能创建一个（不）工作的例子吗？据我了解，问题在于加载/更改，而不是旋转。
使用两个 div - 所以内容已经加载完毕。

标签： javascript jquery html css

【解决方案1】：

不要改变div的内容，只创建两个边：

<div id="wrapper">
    <div class="side-a">
        Some content
    </div>
    <div class="side-b">
        Some content
    </div>
</div>

CSS：

#wrapper{
    transition: all 2s;
    position: relative;
}
#wrapper.flip{
    transform: rotateY(180deg);
}
.side-a{
    z-index: 1;
    opacity: 1;
    position: absolute;
    height: 100%;
    transition-delay: 1s; //half the transition time of the wrapper
}
.side-b{
    z-index: 0;
    opacity: 0;
    transform: rotateY(180deg);
    position: absolute;
    height: 100%;
    transition-delay: 1s;
}
.flip side-a{
    z-index: 0;
    opacity: 0;
}
.flip side-b{
    z-index: 1;
    opacity: 1;
}

Javascript：

$('.next-slide').click(function(){
    $('#wrapper').addClass('flip');
});
$('.prev-slide').click(function(){
    $('#wrapper').removeClass('flip');
});

【讨论】：

我不认为该插件是必要的

【解决方案2】：

尝试增加它的厚度。参考这样的东西：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 来做到这一点。

【讨论】：