How to Set a Rotation Point for an Element in CSS

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/

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).

Set css rotation to point an element towards a point

First of all, the center of your circle is not being calculated correctly. Your circle is 120px wide and high, but you "center" it by setting its top and left to scy - 50, where you should have used scy - 60 (half of 120px is 60px). Or even better, also calculate half circle width and height dynamically and subtract that, in case you change your mind and make it a different size again.

I just did it statically:

circle.css('top',scy-60+"px");
circle.css('left',scx-60+"px");

Second, you want to calculate the angle the .box elements needs to rotate around its center, but you use its top and left positions to do so. That's incorrect.

Again, dynamic would be better, but let's do it static for now:

var angle = calcAngle({x:x + 32,y:y + 32},{x:scx,y:scy});

Then I'm not sure what you're doing with atan2() * 180 / Math.PI, since atan2 returns rads and you want degrees I double checked how to calculate between the two. Turns out it's not as simple as you thought. See this answer.

So I added a function:

function radToDegree(rad) {
    return (rad > 0 ? rad : (2*Math.PI + rad)) * 360 / (2*Math.PI)
}

And implemented it before returning the angle:

function calcAngle(p1,p2){      
    var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
    return radToDegree(angle);
}

Now, degrees start from the top, meaning if the angle is 0 degrees it will point upwards whereas you need it to point to the right due to the way your calculations are set up. So you added + 90 to your final rotate calculations.

That would have been fine if your point started upwards, but it doesn't. It starts from the bottom left, which is another 135 degrees. Add those up, and you get a 225 degree difference. So:

box.css('-webkit-transform','rotate('+(angle+225)+'deg)');  

And voila, your script works: http://jsfiddle.net/7ae3kxam/42/

edit: also works for dragging now

Setting rotation point and center animation in CSS

It seems like the browser does miscalculate the width and height. Although I think JavaScript is as on option, it will usually have the downside of not supporting hardware acceleration. Which is quite visible when increasing the rotational speed. A jpg version will probably be pretty hard to implement since of missing transparency, positioning, loss of responsiveness...

I found a workaround by adding hidden circle with the size of the rotor blades, to the group that is being animated.

.windmill {    top: 50%;    left: 50%;    width: 100%;    height: 100%;    transform-origin: center center;    -webkit-animation: clockwise 1s infinite linear;    -moz-animation: clockwise 1s infinite linear;    animation: clockwise 1s infinite linear;}@-moz-keyframes clockwise {    0% {        -moz-transform: rotate(0deg);    }    100% {        -moz-transform: rotate(360deg);    }}@keyframes clockwise {    0% {        transform: rotate(0deg);    }    100% {        transform: rotate(360deg);    }}

<svg viewBox="0 0 40 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">    <polyline id="body " points="15.039,30.666 15.383,14 16.639,14 16.98,30.666 " transform="matrix(1.2953083,0,0,1.2953083,-4.694094,-0.881751)" style="fill:#000000" />    <g class="windmill">        <circle r="16" cy="16" cx="16" id="ellipse4307" style="fill:#000000;fill-opacity:0;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" />        <path style="fill:#ae0000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" d="m 15.99036,0.001184 a 16,16.11449 0 0 0 -0.293467,0.0101 l -0.341537,12.264949 0.635004,3.923873 -0.0026,0.04048 0.0051,-0.01771 0.0026,-0.02025 0.637535,-3.923873 -0.344066,-12.26242 a 16,16.11449 0 0 0 -0.28841,-0.01518 l -0.0051,0 -0.0051,0 z m -0.0026,16.239421 -0.01771,0.0101 -3.653175,1.399035 -10.2132018,6.413292 a 16,16.11449 0 0 0 0.298528,0.523689 l 10.5522088,-5.808647 3.01817,-2.519779 0.02025,-0.01269 -0.0026,-0.0026 0.0051,-0.005 0.0076,-0.0076 -0.01518,0.0101 z m 0.0051,0.0051 0.03289,0.02025 3.01817,2.52231 10.542089,5.801057 a 16,16.11449 0 0 0 0.313706,-0.516098 l -10.218303,-6.413293 -3.650643,-1.401564 -0.02782,-0.02025 -0.0026,0.0026 0.0101,0.01269 -0.01518,-0.0101 -0.0026,0.0026 z" id="path4286" inkscape:connector-curvature="0" />    </g>    <circle style="fill:#333333;stroke:#e6e6e6;stroke-width:1.29530823;stroke-miterlimit:10" r="1.4896045" cy="16.114491" cx="16" stroke-miterlimit="10 " id="motor " /></svg>

I am trying to rotate the image, however the image is rotating at a pivot point

You need the transform-origin CSS property!

For Javascript: https://www.w3schools.com/jsref/prop_style_transformorigin.asp

For CSS: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

You can apply something like this to the outer element like this:

outer.style.transformOrigin = "left top";

Just put this in the createShape() function with the rest of the styling

I also recommend you do your styling in CSS, not in Javascript every time you create the element

How to set a rotation point on a nested SVG Element

Your problem is the default padding. For added effect, you can also set the SVG and li's to not be display inline or inline-block. Then float them so the align vertically. That should make it not as janky.

body {padding: 3em;}.mobileNav {    display: block;    transition: .5s;    padding: 0;  }     .mobileNav:hover {    transform: rotate(90deg);    transform-origin: 50% 50%;     /*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */  } ul {        float: right;    margin: 15px 50px 0px 0px;  }    li {    display: inline-block;            transition: .5s;  }
 .mobileNav svg, .mobileNav li {      display:block;      float:left; }

<ul class="mobileNav">    <li>     <svg x="0px" y="0px" width="10" height="20">        <circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />        Sorry, your browser does not support inline SVG.     </svg>     </li>    <li>     <svg x="0px" y="0px" width="10" height="20">        <circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />        Sorry, your browser does not support inline SVG.     </svg>     </li>    <li>     <svg x="0px" y="0px" width="10" height="20">        <circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />        Sorry, your browser does not support inline SVG.     </svg>     </li>    </ul>

CSS rotation around a fixed point

Here is the example based on what I understood from your problem.
You need to rotate each item and also need to keep the text upright always.

So you will have to rotate the item and the content inside it as well.

Here I have added additional span and borders to explain the solution.

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 250px;

  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.items {
  padding: 4px;
}

.items span {
  display: block;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

.item1 span {
  animation: spin1 1s linear 1 forwards;
}

.item2 span {
  animation: spin2 1s linear 1 forwards;
}

.item3 span {
  animation: spin3 1s linear 1 forwards;
}

.item4 span {
  animation: spin4 1s linear 1 forwards;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-135deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-225deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-315deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1 items"><span>element1</span></p>
      <p class="item2 items"><span>element2</span></p>
      <p class="item3 items"><span>element3</span></p>
      <p class="item4 items"><span>element4</span></p>
 </div>

---

Related Topics