3

私は次のことをしたいと思います: パースペクティブを持つコンテナーと、translateZ 値を持つ内部要素が与えられた場合、周囲のコンテナーの上部に視覚的に触れるために、translateY で「プルアップ」したいと思います: http://jsfiddle .net/8R4ym/129/

コンテナのパースペクティブ値、要素の幅と高さ、およびそのような「トップ」計算に到達できるZ-translationを考えると、ある種の式はありますか? 私はそれをいじっていますが、それらはすべて変数であるように見えるため、いくつかのルールを見つけることができないようです。

助けてくれてありがとう。

4

2 に答える 2

8

はい！

実際には、オフセットを見つけるための非常に簡単な式があります。ウィキペディアの3d Projection の記事には、図と式があります。

式は次のbx = ax * bz / azとおりです。

  • ax変換原点からの元の距離
  • azはパースペクティブ + ネガティブtranslateZ
  • bzは視点です

これにより、次のようになります。

  • bx- 変換原点からの新しい距離

したがって、次のことを知っておく必要があります。

  • bz: perspective(例: 1000px)
  • ax: 変換起点からのオフセット。例: 起点が 50% の場合、これtopは親要素の中心に対する要素の相対位置である必要があります ( parent.height/2 + element.top) -- としましょう。-500px
  • z: 要素translateZ(例: -600px)
  • azbz + z * -1この場合は次のようになります。1000 + (-600 * -1) = 1600

式は次のとおりです。-500 * 1000 / 1600 = -312.5

要素は原点から垂直にオフセットさ-312.5pxれますが、元々は offset でしたが-500px、2 つの数値の差はtop、同等の新しい値を取得するために古い値に追加する必要があるものです。

この式は Y 軸にも当てはまります。

ここに簡単な例をまとめました: http://jsfiddle.net/trolleymusic/xYRgx/

于 2012-10-05T12:51:51.523 に答える
0

あるかもしれませんが (わかりません)、-webkit-transform-origin:;最初に変更を試みて、上部に沿って単純に変換を適用して、要素を移動せずに必要な場所に表示できるかどうかを確認しましたか?

于 2012-05-08T18:33:31.623 に答える