Question

问题是第2篇文章（.settings）应旋转360°，因此应显示其背面。（如果删除.flip中的溢出，这甚至可以工作）我唯一能看到的是前侧在Y轴上翻转180°

可能是Chrome中的错误？

PS：是的，我想要'真正的长文本节点显示？'因为它根本没有转动。

HTML：

<article class="flip fliped anim" style="min-height: 308px;">

    <article class="settings fliped">
        "Text longer than 2nd article"
    </article>

    <article>
        ...
    </article>

</article>

CSS：

.flip article{
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

.fliped{
    -webkit-transform: rotateY(180deg);
}

http://jsfiddle.net/LatpP/1/

Answer 1

我很难修复你的代码，我也发现了一些重复的属性，所以我决定从头开始重写它，因为我觉得我有你想要实现的目标。

基本上你不需要从360到180，你可以从180到0，如果你需要从0到-180的另一个旋转;）
当你在父和子div上放置180deg旋转的同一个类时：

<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">

.fliped {
-webkit-transform: rotateY(180deg);}

你得到的是度数之和，即360等于0！你也不必总是指定div何时为0deg，因为这是默认情况。

所以here is the code i wrote，动画在悬停时触发（我评论了涉及此类的类）我还添加了另一个包装器来保持透视更逼真，如果你不喜欢它只是删除第一堂课如果你只想看到静态背面（正如你的要求），你只需要将.hover类添加到.flip-container div而不会弄乱你的css，就像这样：

<div class="flip-container hover" >

修改
我忘记了溢出问题，这可以通过将overflow:hidden;属性直接应用于标记的最后一个容器来轻松解决。在我的情况下，直接到.front或.back div（或两者）。这里the final Fiddle已根据您的需求进行了更新。

溢出隐藏和孩子的背面可见性变得疯狂

1 个答案: