Get actual pixel coordinates of div after CSS3 transform

Question

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

that has been transformed with CSS3 attributes like scale, skew

Answer 1

I recommend to you this site : http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ and in particular the section "Other Interesting Facts About Matrices"...

But as Egor Nepomnyaschih pointed out, you just have to implement the calculus for each transformation and to chain them.

I have implemented a jsFiddle based on your example : http://jsfiddle.net/pvS8X/3/ .

Just be careful : the origin is the middle of your figure! If your want to refer to the top, left corner, you have to set this is your CSS code :

transform-origin: 0 0;

cf. https://developer.mozilla.org/fr/docs/CSS/transform-origin.

The main method are these one :

function skew(p, alpha, beta) {
    var tan_a = Math.tan(alpha * Math.PI / 180),
        tan_b = Math.tan(beta * Math.PI / 180),
        p_skewed = {};

    p_skewed.x = p.x + p.y * tan_a;
    p_skewed.y = p.x * tan_b + p.y;

    return p_skewed;
}


function rotate(p, theta) {
    var sin_th = Math.sin(theta * Math.PI / 180),
        cos_th = Math.cos(theta * Math.PI / 180),
        p_rot = {};

    p_rot.x = p.x * cos_th - p.y * sin_th;
    p_rot.y = p.x * sin_th + p.y * cos_th;

    return p_rot;
}


function scale(p, sx, sy) {
    var p_scaled = {};

    p_scaled.x = p.x * sx;
    p_scaled.y = p.y * sy;

    return p_scaled;
}

where p is an object on the form { x: , y: }.