Horen Horen - 9 months ago 49
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


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.


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>

.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: