CODEWITHSUNDEEP
csshtml
vDeepak
vDeepak

Reputation: 103

CSS rotation along a specified side of a <div> element

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.

Upvotes: 3

Views: 6438

Answers (3)

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

You can give X% and Y% as tranform-origin

For example this will gone rotate div along bottom-left corner

  transform: rotate(-10deg);
  transform-origin: 0% 100%;

enter image description here

This one gone rotate along top right corner

  transform: rotate(-10deg);
  transform-origin: 100% 0%;

enter image description here

This one gone rotate along bottom right corner

  transform: rotate(-10deg);
  transform-origin: 100% 100%;

enter image description here

and so on ...by default its 50%,50%

  transform: rotate(-10deg);
  transform-origin: 50% 50%;

enter image description here

Upvotes: 0

The Mechanic
The Mechanic

Reputation: 2329

you can use this properties

transform: rotate(90deg);
transform-origin: center bottom;

Upvotes: 0

oezi
oezi

Reputation: 51797

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 */

Upvotes: 6

Related Questions