When working with CSS3, my goal is to achieve this:
<div style="position:absolute;
left:300px;
top:300px;
width:100px;
height:50px;
border:1px solid black;
transform: scaleX(2) scaleY(1) rotate(45deg); ">
Lorem ipsum dolor sit amet.
</div>
Experience it live here: http://jsfiddle.net/m5ESH/1/
My understanding was that it would initially scale the raster/vectors to double its size horizontally and maintain its current size vertically, followed by rotating each point by 45 degrees. However, as you can see, the right angles are no longer at 90 degrees due to some flaw in my interpretation of the transformations.
So the question now is, how can I implement a rotate transformation without being influenced by previous scaling?