Question

I have one problem regarding rotating the <div> in html page. I have used –

-moz-transform: rotate(90deg)

But this property is rotating the <div> along some axis.(couldnt get that). But i want to rotate the <div> along its bottom side.(here, my div is a square-box). Is it possible?

Thanks.

Answer 1

sounds like transform-origin is what you’re looking for.

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element’s transform, then translating by the property value.)

so you should end up with something like this:

transform: rotate(90deg);
transform-origin: center bottom;
/*transform-origin: 50% 100%;    alternative using percentages */