Convert svg box to a css3 rotated div

Question

I used a vector program to draw and rotate a box shape and the exported it as a svg file.

My goal is to read this svg data with javascript and use it to create a matching div. The div should be absolutely positioned and rotated with css3 to match the shape, position and angle of the svg box.

This might be quite a challenge (at least for me) so I'm not sure what would be the best way to approach the task. The svg code looks like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"               xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600"   xml:space="preserve">
<rect x="172.5" y="154.5" transform="matrix(0.8779 -0.4788 0.4788 0.8779 -68.2383     143.3385)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="149"      height="102"/>
 </svg>

I imagine the rect x and y values can be used directly to define the width and height of the div. But how to determine the correct rotation value for css..

Answer 1

SVG transforms are equivalent to -x-transforms using matrix(). Basically you want to take the SVG matrix and add commas.

So your SVG transform up there is equivalent to:

-webkit-transform: matrix(0.8779 ,-0.4788 ,0.4788 ,0.8779, -68.2383,143.3385);

http://jsfiddle.net/8P76p/

(Incidentally, that's not a pure rotation, it's a rotation + translate.)