计算CSS3缩放框在另一个框中的最高位置

Calculate topmost position of a CSS3 scaled box within another box

本文关键字：高位置 位置 缩放 CSS3 另一个 计算      更新时间：2023-09-26

这是一个棘手的问题。

我需要找到一种方法来计算正确的位置，以便在另一个盒子的顶部对齐一个盒子。然而，内框中有CSS3缩放的内容（缩放因子是已知的），因此基于顶部（0px）的基本方法不起作用。

由于这实际上是不可能正确描述的，请参阅此处的jsFiddle：

http://jsfiddle.net/gPyqS/a

谢谢！

在这里你将不得不弄脏你的数学手。基本方法是：

  1. 获取元素的偏移量
  2. 获取元素的比例因子
  3. 获取元素的高度
  4. 获取元素变换原点的Y分量
  5. 将变换原点-（框高度/2）设为0，将变换原点+（框高度1/2）设为1。给定这些约束，使用当前Y原点执行线性插值，以确定要应用于顶部边缘的比例因子
  6. 将（长方体高度/2）乘以您在步骤5中导出的值，然后从您在步骤1中获得的Y偏移中减去它。这是长方体顶部边缘的视觉偏移

使用转换指定转换原点：

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更新

W3C：转换源

相关文章：