少し見てみましたが、-webkit-backface-visibility機能が少しむらがあるようです。MacおよびLinux上のChrome18では、正常に動作します。Windows上のChrome18では、そうではありません。ただし、MacでChromeを実行している他の人も見たことがありますが、Chromeも機能しません。
これが私のテストフィドルです：http：//jsfiddle.net/csaltyj/TYuL3/
残念ながら、私はカードフリップアニメーションを行っているので、カード-webkit-backface-visibility: hiddenの裏面を隠すために使用する必要があります。何があっても、Chromeで100％動作する同等の機能はありますか？
さて、私はいくつかの調査を行いました、そして明らかにそれはマシンと使用されたクロムバージョンに依存します。
クロムはクロムの開発に続くため、この問題が時々発生することがわかりますhttp://code.google.com/p/chromium/issues/detail?id=39044
このCSSは私のコンピューターで機能するため、試すことができない2つの解決策を見つけました。
あなたは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>
アニメーションの途中で不透明度を非表示にするために、不透明度に遷移遅延を使用する非常にエレガントな回避策を見つけました。
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;
}
私は今、私のプロトタイプでこの問題に遭遇しました。いくつかの重要なコーディングを誤って変更したと思いましたが、いいえ、それが確実に機能した以前のコミットに戻すことは役に立ちませんでした。
信じられないかもしれませんが、Chromeを再起動すると修正されました。
transform-style: preserve-3d;私はこのcssまたはより正確にはこのコンパスミックスインを使用してこの問題を解決しました@include transform-style(preserve-3d);
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .1s .5s ease-in-out;
不透明度が:hover0に設定されている場合。
アニメーションは1秒かかりますが、0.5秒ではユーザーの脇にあるためカードは見えません。したがって、これは不透明度=>0が0.1秒で発生する時間です。それはうまく機能します。