CODEWITHSUNDEEP
javascripthtmlcss
sazr
sazr

Reputation: 25928

Set the rotation point for CSS object

Is it possible to specify the rotation point when rotating a HTML element?

For example: if a HTML div has the left, top, width, height attributes: 0,0,100,100. The rotational point(the point we rotate the div around) will be 50,50(the midpoint). But I want to change the rotational point to 0,0.

I am rotating using the CSS 'transform' attribute:

#myDiv {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   /*Can I specify the rotational point???*/
   transform: rotate(45deg) rotation-point:0px 0px; ??
}

There is a way to do it using the CSS 'rotation' attribute but W3Schools says that isn;t supported by major browsers:

rotation: 45deg;
rotation-point:0px 0px;

Upvotes: 0

Views: 719

Answers (1)

dangerChihuahua007
dangerChihuahua007

Reputation: 20895

Yes, use the transform-origin CSS3 property.

http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property

Upvotes: 1

Related Questions