在CSS3变换后获取div的实际像素坐标 [英] Get actual pixel coordinates of div after CSS3 transform

问题描述

可以获得已经使用CSS3属性（例如 scale <>）转换的< div /> / code>， skew 和 rotate ？

Is it possible to get the four actual corner coordinates of a <div /> that has been transformed with CSS3 attributes like scale, skew and rotate?

示例：

在CSS3转换之前，坐标是

Before the CSS3 transformation the coordinates are

x1y1: 0,0
x1y2: 0,200
x2y1: 200,0
x2yw: 200,200

，div如下所示：

一点点CSS3魔法 transform：skew（10deg，30deg）旋转（30deg）缩放（1,2）;
它看起来像这样：

after a little bit of CSS3 magic transform: skew(10deg, 30deg) rotate(30deg) scale(1, 2); it looks like this:

如何获取实际角的坐标不是边界框）？
任何帮助非常感激。

How can I get the coordinates (with javascript) of the actual corners (not the bounding box)? Any help greatly appreciated.

推荐答案

过了几个小时，我试图计算所有的变换，一个简单而天才的小黑客，使得难以置信的容易得到转换的< div />

After hours trying to calculate all the transformations and almost giving up desperately I came up with a simple yet genius little hack that makes it incredibly easy to get the corner points of the transformed <div />

我刚刚在div中添加了四个句柄，位于角落，但不可见：

I just added four handles inside the div that are positioned in the corners but invisible to see:

<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）位置：

Now with jQuery (or pure js) it's a piece of cake to retrieve the position:

$(".handle.se").offset()

这篇关于在CSS3变换后获取div的实际像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！