Question

Here’s my current code so far:

http://jsfiddle.net/VsGMa/2/
As you can see the tab is not positioned correctly.

Here is the “horizontal” version which works fine:

http://jsfiddle.net/HHg7S/

Any ideas as to what may be wrong or how I can align it correctly?

transform-origin is now 0% 100% – tried a bunch of other values as well with no luck.

Answer 1

Use

transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%) translateY(-100%);

demo

Works no matter what size the tab should be.