1

translate3d（webkit変換）の「z」が使用されている例を誰かが説明または指摘できますか？モバイルSafariでハードウェアアクセラレーションによる2Dアニメーションを取得することに成功しましtranslate3d(x,y,0)たが、現在はzパラメーターを使用してスケーリングしようとしていますが、効果がないようです...

elem.style.WebkitTransform = 'translate3d(100px,0,0)'; // this works as expected
elem.style.WebkitTransform = 'translate3d(0,0,100)'; // nothing happens
elem.style.WebkitTransform = 'translate3d(0,0,100px)'; // nothing happens
elem.style.WebkitTransform = 'scale(1.2, 1.2)'; // works but slow on ios

補足：iOSでスムーズに動作する小さなズームスクリプトを作成しようとしています。

4

2 に答える 2

3

これは、Webkitトランスフォーム3Dがどのように機能するかを示すために作成しました。

http://jsbin.com/iderag

お役に立てば幸いです。-webkit-perspectiveあなたのbodyタグまたは親タグがないのではないかと思います。

于 2011-09-21T23:16:47.120 に答える
1

含むボックスに-webkit-perspectiveを設定することを忘れないでください。800が適切な開始値です。ボックスが消えた場合は、それを減らします。おそらくビューポートよりも大きくなります。

Surfin'Safariブログには、3D変換が最初に発明されたときの記事があります。

-webkit-perspectiveは、奥行きのある錯覚を与えるために使用されます。z=0平面からのzオフセットに基づいてサイズがどのように変化するかを決定します。p離れたところからページを見ているように考えることができます。z = 0平面上のオブジェクトは、通常のサイズで表示されます。p / 2のazオフセット（ビューアとz = 0平面の中間）にあるものは2倍の大きさに見え、-pのazオフセットにあるものは半分の大きさに見えます。したがって、値が大きいと短縮効果が小さくなり、値が小さいと短縮効果が大きくなります。500pxから1000pxの間の値は、ほとんどのコンテンツに対して妥当な結果をもたらします。

詳細はこちら：http ：//www.webkit.org/blog/386/3d-transforms/

于 2011-09-21T21:23:49.393 に答える