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

Question

是否有可能得到的四个实际的顶点坐标<div />是已经用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); 它看起来像这样:

如何获得实际角点(不是边界框)的坐标(使用javascript)？任何帮助非常感谢.

Answer 1

经过几个小时试图计算所有变换并且几乎绝望地放弃了我想出了一个简单但天才的小黑客,这使得获得变换的角点非常容易<div />

我刚刚在div中添加了四个手柄,这些手柄位于角落但看不见是看不见的:

<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()