如何使div在使用rotateY（90度）时不消失

Question

在我的网页上，我有一个div。在这个div上我有一个“动画”，模拟翻转（翻转）的div。

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

我使用jQuery插件transit旋转"wrapper" div。这个插件所做的就是应用CSS;

transform: rotateY(180deg);

当

元素处于rotateY(90deg)状态时，我需要在#content中加载一些新内容。这只需要极少的时间，但在动画中，您可以看到该

元素在此期间消失/隐藏。

查看演示 FIDDLE （请注意，我这里没有实际加载内容）

是否有可能使

元素在rotateY(90deg)时不完全消失？

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

- moffeltje

---

你能否创建一个（不）工作的示例？就我理解的问题而言，它是加载/更改而不是旋转。 - eisbehr

使用两个div - 这样内容就已经加载了。 - freedomn-m

Answer 1

尝试为其添加厚度。参考这样的内容：想要在元素旋转时显示其厚度。但要使CSS动画如下： 0%：transform: rotateY（0deg）; 50%：transform: rotateY（90deg）; 100%：transform: rotateY（180deg）; 希望这可以帮到您。 确保jQuery插件具有CSS文件或查看其内容。 此外，您还可以使用基本的CSS和jQuery来完成此操作。

- Mechetle

Answer 2

不要改变 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');
});

- Mahmoud Wagdi Al-Awadi

---

我认为插件不是必要的。 - Mahmoud Wagdi Al-Awadi