width/height after transform

Question

How do I retrieve the width and height properties after I\'ve applied transform: rotate(45deg);?

Like, 11x11 square after rotation becomes 17x17 (Chrome

Answer 1

I made a function for this, domvertices.js

It computes the 4 vertices 3d coordinates of any, deep, transformed, positioned DOM element -- really just any element: see the DEMO.

a                b
 +--------------+
 |              |
 |      el      |
 |              |
 +--------------+
d                c

var v = domvertices(el);
console.log(v);
{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

With those vertices, you can compute anything among: width, height... Eg, in your case:

// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

See the README for more infos.

--

It is published as a npm module (with no dep), so just install it with:

npm install domvertices

Cheers.