Menu
How to rotate an element with respect to a defined point i.e. defined x & y coordinate in CSS (webkit)?
Normally rotation make element's center point as reference.
779
You could use transform-origin. It defines the point to rotate around from the upper left corner of the element. This would rotate around the upper left corner.
css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.
We can add the following to a particular tag in CSS: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); In case of half rotation change 90 to 45 .
The order is right to left, not left to right. transformation: translate(0,10%) rotate(25deg); The rotate operation is done first, then the translate .
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).
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
