Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Get actual pixel coordinates of div after CSS3 transform

Get actual pixel coordinates of div after CSS3 transform

Problem

Is it possible to get the four actual corner Coordinates of a

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.

Problem courtesy of: Horen

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

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


.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()
Solution courtesy of: Horen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Get actual pixel coordinates of div after CSS3 transform

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×