3

问题是第二篇文章（.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/

4

1 回答 1

3

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

基本上你不需要从 360 到 180，你可以从 180 到 0，如果你需要从 0 到 -180 的另一个旋转；）
当你在父子 div 上放置具有 180 度旋转的同一个类时，如下所示： 

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

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

你得到的是度数的总和，即360等于0！此外，您不必总是指定 div 何时为 0deg，因为这是默认设置。

所以这是我编写的代码，悬停时触发动画（我评论了涉及的类）。
我还添加了另一个包装器以使透视图更真实，如果您不喜欢它，只需删除第一个类即可。
如果您只想查看静态背面（如您所问），您只需将.hover类添加到.flip-containerdiv 而不会弄乱您的 css，如下所示： 

<div class="flip-container hover" >

编辑
我忘记了溢出问题，通过将overflow:hidden;属性直接应用于标记的最后一个容器很容易解决。在我的情况下，直接到.front或.backdivs （或两者）。这是根据您的需要更新的最终小提琴。

于 2013-04-13T02:27:18.747 回答