0

これはトリッキーです。

ボックスを別のボックス内の上部に配置するための正しい位置を計算する方法を見つける必要があります。ただし、内側のボックス内に CSS3 でスケーリングされたコンテンツがあるため (スケーリング ファクターは既知)、基本的なベース オン トップ (0px) アプローチは機能しません。

これを適切に説明することは文字通り不可能なので、こちらの jsFiddle を参照してください。

http://jsfiddle.net/gPyqS/a

ありがとう！

4

2 に答える 2

1

ここで数学の手を汚す必要があります。基本的なアプローチは次のとおりです。

  1. 要素のオフセットを取得します
  2. 要素の倍率を取得する
  3. 要素の高さを取得する
  4. 要素の変換原点の Y コンポーネントを取得します
  5. -(ボックスの高さ / 2)0の変換原点を 、+(ボックスの高さ / 2) の変換原点を とします1。これらの制約を考慮して、現在の Y 原点を使用して線形補間を実行し、上端に適用する倍率を決定します。
  6. (ボックスの高さ / 2) に手順 5 で得た値を掛け、手順 1 で取得した Y オフセットから減算します。これは、ボックスの上端の視覚的なオフセットです。
于 2012-09-11T02:39:03.907 に答える
0

transform で transform-origin を指定します。

transform-origin: 0 0; 
-ms-transform-origin: 0 0; 
-webkit-transform-origin: 0 0;  
-moz-transform-origin: 0 0;  
-o-transform-origin: 0 0;

フィドルの更新

W3C: 変換元

于 2012-09-11T02:12:21.897 に答える