计算CSS3缩放框在另一个框中的最高位置
Calculate topmost position of a CSS3 scaled box within another box
这是一个棘手的问题。
我需要找到一种方法来计算正确的位置,以便在另一个盒子的顶部对齐一个盒子。然而,内框中有CSS3缩放的内容(缩放因子是已知的),因此基于顶部(0px)的基本方法不起作用。
由于这实际上是不可能正确描述的,请参阅此处的jsFiddle:
http://jsfiddle.net/gPyqS/a
谢谢!
在这里你将不得不弄脏你的数学手。基本方法是:
- 获取元素的偏移量
- 获取元素的比例因子
- 获取元素的高度
- 获取元素变换原点的Y分量
- 将变换原点-(框高度/2)设为
0
,将变换原点+(框高度1/2)设为1
。给定这些约束,使用当前Y原点执行线性插值,以确定要应用于顶部边缘的比例因子 - 将(长方体高度/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:转换源
相关文章:
- 对jQuery UI可排序表应用包含可以防止将高行移动到最后一个位置
- 将svg元素放置在另一个元素顶部的较高位置
- 固定的全高侧边栏(宽度/位置可变)
- 具有固定左列的表.由于位置绝对而导致的行高问题
- 将Google Analytics跟踪代码放在的较高位置是否会提高准确性
- 高图:多系列柱形图中的位置散点图
- 导出按钮位置更改 IE 11 中的高图表
- 根据起始位置和结束位置高亮显示字符串中的子字符串
- 保存文本中光标高亮显示的位置
- 使锚链接比其链接到的位置高出一些像素
- 如何找到DOM层次结构中哪个元素的位置更高
- 文本区域标签高亮显示应用于第一行之后的错误位置
- 为什么我得到的位置()左值的疯狂高值
- Jquery注意,右顶部位置,显示新消息更高(又名后进先出)
- 文本高亮显示.替换位置开始和结束处的文本
- 高图-在鼠标位置绘制十字准线/工具提示,而不是捕捉到数据点
- 检测给定字符串中的位置/位置名称
- 如何在窗口上保持页面位置.位置更改
- var 位置 = 位置对我的对象有什么作用
- Chrome JavaScript计算行高,位置不同