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

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 的另一个旋转；）
当您将具有 180 度旋转的同一类放在父子 div 上时，如下所示：

<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 divs（或两者）。这里是 the final Fiddle 更新以满足您的需求。