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

css css-transforms
kugyousha picture kugyousha · Jul 11, 2011 · Viewed 40.2k times · Source

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?

Answer

Marco Allori picture Marco Allori · Nov 22, 2012

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/

Related questions

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform? Example: In the following, only the translation is applied, not the rotation. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More