Search code examples
javascriptjquerycsstransform

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.

Solution

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