10

所以我环顾四周，似乎-webkit-backface-visibility功能有点参差不齐。在 Mac 和 Linux 上的 Chrome 18 中，它运行良好。在 Windows 上的 Chrome 18 中，它没有。但是，我看到其他人在 Mac 上运行 Chrome，但它也不起作用。

这是我的测试小提琴：http: //jsfiddle.net/csaltyj/TYuL3/

不幸的是，由于我正在制作卡片翻转动画，我需要使用它-webkit-backface-visibility: hidden来隐藏卡片的背面。无论如何，有没有可以在 Chrome 上 100% 使用的等价物？

4

5 回答 5

5

好吧，我做了一些研究，显然这取决于机器和使用的 chrome 版本。

由于铬跟随铬发展，我们可以看到这个问题有时会出现http://code.google.com/p/chromium/issues/detail?id=39044

我找到了 2 个我无法尝试的解决方案，因为这个 CSS 可以在我的计算机上运行。

你可以从 cssplay获得灵感

CSS：

#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

HTML：

<div id="container">
    <div class="lower">

        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
    </div>
    <div class="upper">
        <img src="cssplay7/owl.jpg" alt="Barn owl" />
    </div>

</div>
于 2012-05-02T16:24:04.517 回答
5

我发现了非常优雅的解决方法，在不透明度上使用过渡延迟将其隐藏在动画的中间。

http://jsfiddle.net/TeXTQ/

div {
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration:2s, 0;
    -webkit-transition-timing-function:ease-in-out,ease-in-out;
    -webkit-transition-delay:0,1s;
}
div:hover {
    -webkit-transform: rotateX(-180deg) rotateY(0deg);
    opacity:0;
}
于 2012-09-19T09:46:07.273 回答
3

我现在偶然发现了这个问题，我的原型。我以为我不小心更改了一些基本的编码 - 但不，恢复到它确实有效的先前提交并没有帮助。

信不信由你：重新启动Chrome 为我修复了它。

于 2013-03-15T21:00:47.710 回答
2

我使用这个 csstransform-style: preserve-3d;或更准确地说这个 Compass mixin解决了这个问题@include transform-style(preserve-3d);

于 2013-08-01T17:18:53.377 回答
0 
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .1s .5s  ease-in-out;

不透明度:hover设置为 0。

动画需要 1 秒，在 0.5 秒内卡是不可见的，因为它在用户旁边，所以这是在 0.1 秒内出现 opacit => 0 的时间。它工作得很好。

于 2013-01-06T21:42:17.597 回答