計算另一個盒子中CSS3縮放框的最頂端位置

Question

這是一個棘手的問題。

我需要找到一種方法來計算正確的位置，以便將盒子頂部的盒子對齊。但是，內部框中有CSS3縮放內容（比例因子已知），因此基本的基於頂部（0px）的方法將不起作用。

由於這是根本不可能正確地描述，在這裏看到我的jsfiddle：

http://jsfiddle.net/gPyqS/a

謝謝！

Answer 1

你將不得不讓你的數學手髒這裏。其基本做法是：

1. 獲得位置的元素
2. 獲取元素
3. 的比例因子獲取元素
4. 的高度獲取元素的轉型起源
的Y分量
5. 考慮 - （盒高/ 2）的變換原點爲0，+（盒高/ 2）的變換原點爲1。給定這些約束條件，使用當前Y原點執行線性插值以確定應用於頂邊的比例因子。
6. 將您在步驟5中獲得的值相乘（框高/ 2），並將其從步驟1中獲得的Y偏移量中減去。這是框的上邊緣的視覺偏移。

Answer 2

指定變換原點與改造：

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

Fiddle Update

W3C: transform-origin