Safari6 transformとperspective、preserve-3dの検証

Posted by dab | 2012年7月31日 火曜日 12:38:18 < コンピュータ >

だぶチルトのゲームがSafari6で動かなくなっているわけですが、
どうやらSafari6で、3D関連のCSSが動かなくなった模様。

https://twitter.com/openspc/status/230114570373566465?uid=59377436&iid=am-133564127713436985638109830&nid=27+232
openspcの古籏さんにちょっと聞いてみたのですが、動く場合もあるとの事。

これについて、ちょっと調べてみました。

—-動作しない例—-


<style>
#container {
position: absolute;
top: 83px;
left: 0px;
height: 100px;
width: 200px;
/* -webkit-transform-style: preserve-3d;*/
-webkit-perspective: 480;
-webkit-transform: rotateY(180deg);
}
</style>
<div id="container">
<p>あいうえお</p>
</div>

なにか、perspectiveを指定したものと、transformを指定したものが同じものの場合は、要素が消えるらしいです。

—-動作する例—-


<style>
#container {
position: absolute;
top: 83px;
left: 0px;
height: 100px;
width: 200px;
/* -webkit-transform-style: preserve-3d;*/
-webkit-perspective: 480;
}
#container p{
-webkit-transform: rotateY(180deg);
}
</style>
<div id="container">
<p>あいうえお</p>
</div>

なお、transform-style:preserve-3d;を指定すると、要素が消えるようです。

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=1053

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: