0

transform プロパティの使用時に問題が発生しました。

画面を埋める単純な DIV が 1 つと、その上に別の DIV があります。

上の DIV に次の変換を適用しています。

'transform':'rotateX(Xdeg) 回転Y(Ydeg)'; 私もpreserve-3dを使っています

これは、Safari を除くすべてのブラウザーで完全に機能します。私が読んだことから、Safariは実際にこれを正しく取得する唯一のものであり、変換が適用されている上部のDIVをクリップします。他のブラウザーは DIV をクリップしません。基本的に、DIV を回転させると、最下層の DIV の内側/後ろに移動します。

だから、translateZ を使って一番上の DIV を前に引っ張る必要があると思いますか?

私の質問は、div を Z 軸に沿って前方に移動する必要があるか、またはこれを Safari で機能させるために必要な量を計算するにはどうすればよいですか? 回転 X と Y は変数になるため、ユーザーは要素を X、Y のいずれかに沿って回転させるか、両方に沿って回転させるか、まったく回転させないことができます。

これに関するどんな助けも素晴らしいでしょう。ありがとう！

4

2 に答える 2

0

X と Y の値は常に正ですか?

この場合、

transform-origin 0% 0%

トリックを行う必要があります（回転の中心を、結果が低くなるポイントにします）

そうでない場合は、少しのロジックのみが必要です。

X 角度が正の場合、x 原点は 0%、それ以外の場合は x 原点は 100% です。

Y 角度が正の場合、y 原点は 0%、それ以外の場合は y 原点は 100% です。

そして、適用する

transform-origin x-origin y-origin
于 2013-04-29T18:58:39.313 に答える
0

jsFiddle なしでは問題を再現できません。のような関数を使用できますelement.getBoundingClientRect()。これにより、2 番目に変換された div の現在の座標が得られます。これらを最初の div の座標と比較すると、必要な translateZ が見つかるはずです。変換された div の 4 つのコーナーすべてを比較する必要があります。負の DELTA は、そのコーナーが最初の div と交差していることを意味します。

于 2013-04-30T10:58:13.533 に答える