所以我已经看了一下,似乎-webkit-backface-visibility功能是有点毛病.在Mac和
Linux上的Chrome 18中,它工作正常.在Windows 18的Chrome 18中,没有.不过,我已经看到其他人在Mac上运行Chrome,而且它也不起作用.
这是我的测试小提琴：http://jsfiddle.net/csaltyj/TYuL3/
不幸的是,由于我正在做一个卡片翻转动画,我需要使用-webkit-backface-visibility：隐藏来隐藏卡的背面.有没有一些等同的我可以使用的工具100％在Chrome,无论什么？
解决方法
好的,我做了一些研究,显然这取决于机器和使用的铬版本.
铬如铬开发,我们可以看到这个问题有时出现在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,from(#463),#8a7),#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>
