What is the reverse skew value when applying a CSS skew transform to an element?

Question

I'm skewing and rotating an element with CSS transform and I'd like to make the inner element appear normal again by applying a "reverse" transformation. With rotation it's easy: if you have an element that is rotated 45 degrees then the inner one would have a rotation of -45 degrees to look "normal" again.

Now, with rotation and skew it's not so easy. See this example here: http://jsfiddle.net/8R4ym/56/

The text is rotated and skewed in a way that it's at least positioned correctly but I can't seem to find the "rules" for making it look perfectly normal applying some kind of reverse transforms. Any ideas? Thanks a lot!

Answer 1

I believe this is the effect you're looking for: http://jsfiddle.net/8R4ym/108/

I believe the non-communicative operations are messing up your image. It matters in what order the skew and rotate are performed. "transform" seems to perform them from left to right (first rotate and then skew) and won't let you use the "transform" attribute twice in a single definition space. I couldn't find any way to change the order in which the operations are performed so I instead inserted another div so that skew would be performed before rotate the second time around. I hope this is what you're looking for.

Edit: I just noticed a small difference in text size. I think you might have to put in a hack to increase text size by some percentage.