Horen Horen - 2 months ago 12
Javascript Question

Get actual pixel coordinates of div after CSS3 transform

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:

before transformation

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

it looks like this:

after transformation

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

Answer

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