I just had the same problem and solved it like this:
– you first have to flip the DIV to the left (rotate -90) on its bottom left corner.
– then you shift it to the right (left: Xpx) by the exact amount of pixels as the original height !
Result: the original top-left corner has moved to the original bottom left corner and thus scaling works as expected.
Here’s the html code:

test

and css:
.vertical {
height: 30px;
width: 60 px;
transform-origin: bottom left;
transform: rotate(-90deg);
left: 30px;
}
regards,
GermanChris

Welcome to CSS Tricks!

Did you ever find out the solution to this?
Because this is the EXACT problem that I am having….

You’d simply use the tag attribute transform-origin: initial; as reset value. See Transform Origin Attributes

Unless you’re talking about fallback coding CSS tricks are for CSS tricks, rarely is JS used anywhere for the actual affect. If you refer to Codepen you can see there is minimal JS and no libraries are used. This would defeat the CSS workaround in the first place. As such though besides IE9(and lower) vendor prefixes should support all other browsers for these methods in most cases.

I’ve used transform: scale(.5,.5); but my margins behave as though the item has not been scaled. When I resize the browser, the left margin cause the item to push away from the edge. When I inspect elements and turn off the transform, I can see that the item is reacting to the original size (pre-transform).

Is there a way to use transform-origin to correct this? I tried transform-origin: 25%50%; however the problem persists, just at different proportions.

I am referring to the bottom image on this page: stephendanison.com/mondrian

You’d be best of using https://github.com/madrobby/vapor.js, pretty good for implementing these transforms.

None, it’s pure CSS.