Get actual pixel coordinates of div after CSS3 transform

Question

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?

Example:

Before the CSS3 transformation the coordinates are

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

and the div looks like this:

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.

Answer 1

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 />

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; }            

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

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