Issue
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.
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()
Answered By - Horen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.