Rotating a Div How to Set Around Which Point to Rotate

Rotating a div how to set around which point to rotate?

You'd use transform-origin for that :

$elie.css("-webkit-transform-origin", "50% 100%" );

or

transform-origin: 100% 40%;
-ms-transform-origin: 100% 40%; /* IE 9 */
-webkit-transform-origin: 100% 40%; /* Safari and Chrome */
-moz-transform-origin: 100% 40%; /* Firefox */
-o-transform-origin: 100% 40%; /* Opera */

FIDDLE

---

EDIT:

To rotate around the center of the .circle element, it first needs a height, otherwise there is no center. Then you could use percentages, or the much handier center property, like so:

transform-origin:center center;

DEMONSTRATION

CSS rotation with respect to a reference point

You could use transform-origin.
It defines the point to rotate around from the upper left corner of the element.

transform-origin: 0% 0%

This would rotate around the upper left corner.

For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

for the safer side if this link not available then here are a couple of more options

transform-origin: center; // one of the keywords left, center, right, top, and bottom

transform-origin: top left; // same way can use two keywords

transform-origin: 50px 50px; // specific x-offset | y-offset

transform-origin: bottom right 60px; // third part is for 3D transform : z-offset

As far as I know there isn't an option to rotate around a fixed point (although this would be handy).

How to rotate a div by using two points coordinates in JavaScript?

For two points •a and •b , both having x y coordinates

distance Math.hypot(by-ay, bx-ax)
degrees Math.atan2(by-ay, bx-ax) * 180 / Math.PI;

The div is than positioned top,left according to the point a coordinates.

The transformOrigin needs to be defined as left 50% in order to keep the div point-centered:

function creatediv(id, ax,ay, bx,by, size, opacity, color) { 
    var length = Math.hypot(by-ay, bx-ax),        deg    = Math.atan2(by-ay, bx-ax) * 180 / Math.PI;
    var newdiv = document.createElement('div');     newdiv.setAttribute('id', id);      newdiv.style.width =  length + "px";         newdiv.style.height = (size||2) + "px";      newdiv.style.left = ax + "px";       newdiv.style.top = ay + "px";       newdiv.style.background = color || "red";        newdiv.style.opacity = opacity || 1;    newdiv.style.transformOrigin = "left 50%";    newdiv.style.transform = "rotate("+ deg +"deg)";    newdiv.style.position = "absolute";
    document.body.appendChild(newdiv); 
}

creatediv("a", 20, 20, 200, 80);

Rotating a div about a point

Found a plugin that does exactly this:

https://github.com/heygrady/transform/wiki/

It lets you animate transforms using the standard animate() function!

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

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/

How to apply CSS rotate transition around glyph's vertical middle or centerpoint

You can achieve it by setting css propertytransform-origin: 50% 50% it will provide transformation around the center of the element. I hope this works.

---

Related Topics