2

次の問題についてご協力いただければ幸いです: CSS3 変換を使用して、マウス クリックの位置を中心にブラウザのビューポートを配置したいと考えています。http://jsfiddle.net/XjpdU/にあるコメント付きの例をご覧ください。

私が抱えている問題は、最初のクリックでのみ翻訳が正常に機能することです。最初のクリック後、ビューポートの中心とマウスのクリック位置の間の距離は正しく計算されているように見えますが、移動はどこにでもジャンプしているように見えます。

「transform-origin」(私の例では -webkit-translate-origin) を最後のクリックの位置 (つまり、ビューポートの現在の中心) に明示的に設定しようとしましたが、「translate」を使用すると「transform-origin」ディレクティブは単純に無視されます。

助けてくれてありがとう!y

4

1 に答える 1

0

はい、transform-origin は翻訳には影響しません。それはこのように動作します：

  1. 恒等行列から始めます。
  2. 'transform-origin' の計算された X、Y、Z 値で変換</li>
  3. 「transform」プロパティの各変換関数を順番に乗算します
  4. 'transform-origin' の計算された X、Y、および Z の値を否定して変換します。

http://www.w3.org/TR/css3-transforms/#transform-rendering

あなたができることは、翻訳を記憶し、新しく計算されたものをそれに追加することです。これにより、前のポイントから始まる相対的な翻訳が発生します。

x = prevX = prevX + newX
y = prevY = prevY + newY

http://jsfiddle.net/XjpdU/1/

于 2012-10-05T22:20:55.150 に答える