Question

所以我看了一下，似乎-webkit-backface-visibility功能有点不稳定。在Mac和Linux的Chrome 18中，它运行正常。在Windows上的Chrome 18中，它没有。但是，我看到其他人在Mac上运行Chrome，但它也无效。

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

不幸的是，由于我正在进行卡片翻转动画，我需要使用-webkit-backface-visibility: hidden来隐藏卡片的背面。是否有一些我可以使用的等价物在Chrome上100％有效，无论如何？

Answer 1

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

由于铬跟随铬开发，我们有时会看到此问题http://code.google.com/p/chromium/issues/detail?id=39044

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

尝试使用此选项启动chrome： - enable-accelerated-compositing
试用https://stackoverflow.com/a/9276526/460368
等待新版本的Chrome;）

你可以通过cssplay

获得that的启发

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>

Answer 2

我找到了相当优雅的解决方法，使用不透明度的过渡延迟将其隐藏在动画的中间位置。

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;
}

Answer 3

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

信不信由你：重新启动 Chrome已经为我修好了。

Answer 4

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

Answer 5

-webkit-transition: -webkit-transform 1s ease-in-out, opacity .1s .5s  ease-in-out;

不透明度在:hover上设置为0.

动画需要1秒钟，在0.5秒内卡片是不可见的，因为它不在用户旁边，所以这是时间，当opacit =＆gt; 0以0.1s出现。它很好用。

Chrome中的背面可见性已损坏（某些平台/版本）

5 个答案: