CSS3 Transition Rotating Does Not Fit

    Awhile back I created an application to display some data inside of a table but after it was all said and done I was then asked if I could make it so the information could be rotated. With that I thought I could easily implement this using CSS3 transition and rotate on the x-axis but I would much prefer doing this in a canvas.Which make this a great solution but current my content is displayed in a table and isn't scalable this way, so it doesn't help for me. I could also use d3js, from what I've seen in the examples it could be easier to implement.
    I did find that some created a solution to handle the issue with Css3 transition, where as you rotate the element the content around it does not adjust appropriately. There is reasons behind why this happens, but no proper way to handle it with just css. As you rotate a given element it does not remove or change any of the styles attached to it. So margin, padding and whatever else will still be applied but also as you rotate at now top and bottom become right and left or vise versa. If you're element/object is symmetrical none of this should be a problem, but sadly I can't make the table symmetrical.

Reference
http://jsfiddle.net/oscarpalacious/ZdQKg/ - Answer found in first resource and first answer.

Resources
Calculate the bounding box's X, Y, Height and Width of a rotated element via JavaScript
Adjusting parent element of css-transformed image to fit. (Twitter Bootstrap) - Stack Overflow
I could possibly save things as an png and just rotate that image,http://bl.ocks.org/mbostock/6466603 I know this is for svg's but any element would do.
Rotating a SVG with Css (Animation) - Stack Overflow - Just curios if I was using d3js

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync