javascript - CSS3变换后获取div的实际像素坐标

Question

是否可以得到 <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)？非常感谢任何帮助。

Answer 1

在尝试计算所有变换并几乎绝望地放弃几个小时后，我想出了一个简单而天才的小技巧，它非常容易获得变换后的 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()