是否可以得到 <div />
的四个实际 Angular 坐标?已使用 CSS3 属性进行转换,例如 scale
, skew
和 rotate
?
示例:
在 CSS3 变换之前坐标是
x1y1: 0,0
x1y2: 0,200
x2y1: 200,0
x2yw: 200,200
div 看起来像这样:
一点点 CSS3 魔法之后 transform: skew(10deg, 30deg) rotate(30deg) scale(1, 2);
它看起来像这样:
如何获取实际 Angular (不是边界框)的坐标(使用 javascript)? 非常感谢任何帮助。
最佳答案
在尝试计算所有变换并几乎绝望地放弃几个小时后,我想出了一个简单而天才的小技巧,它非常容易获得变换后的 Angular 点 <div />
我刚刚在 div 中添加了四个位于 Angular 落但看不见的 handle :
<div id="div">
<div class="handle nw"></div>
<div class="handle ne"></div>
<div class="handle se"></div>
<div class="handle sw"></div>
</div>
.handle {
background: none;
height: 0px;
position: absolute;
width: 0px;
}
.handle.nw {
left: 0;
top: 0;
}
.handle.ne {
right: 0;
top: 0;
}
.handle.se {
right: 0;
bottom: 0;
}
.handle.sw {
left: 0;
bottom: 0;
}
现在使用 jQuery(或纯 js)检索位置是小菜一碟:
$(".handle.se").offset()
关于javascript - CSS3变换后获取div的实际像素坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17087577/