CODEWITHSUNDEEP
csscss-transforms
kugyousha
kugyousha

Reputation: 2678

How can I set a rotation point for an element in CSS?

Is it possible to set the rotation point in CSS? The default rotation point is at the 50%, 50%. I tried:

transform: rotate(230deg); 
rotation-point:90% 90%;

But it does not work... Any suggestions?

Upvotes: 56

Views: 68847

Answers (4)

spraff
spraff

Reputation: 33385

Use the transform-origin CSS property:

.class {
    transform-origin: 0 0;
}

Upvotes: 18

Marco Allori
Marco Allori

Reputation: 3294

This will set the rotation pivot point on top-left corner of your element and rotate it:

transform: rotate(-25deg);
transform-origin: 0% 0%;

take a glance at .nav_item_txt class:

http://jsfiddle.net/KHkX7/

Upvotes: 68

Phill upNorth
Phill upNorth

Reputation: 101

Try using the transform-origin property instead, rotation-point isn't supported...

For rotating on the top right point of an element (including all targeting):

-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;

Upvotes: 10

Mayur
Mayur

Reputation: 29

just go to http://www.w3schools.com/cssref/css3_pr_rotation-point.asp and read carefully. it says that none of the major browsers support this property.

Upvotes: -2

Related Questions