javascript - Rotating a div how to set around which point to rotate? - Stack Overflow

admin管理员组

文章数量:1345476

My javascript is:

$(function() {
    var $elie = $(".circle");
    rotate(0);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(++degree);
        },5);
    }
}); 

How do I rotate the div around another center point?

Here's demo:

$(function() {
    var $elie = $(".circle");
    rotate(0);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(++degree);
        },5);
    }
});

.circle {
  width: 200px;
  height: 200px;
  background: green;
  border-radius: 50%;
  border: 4px dashed black;
 
  margin: calc(50vh - 100px) auto 0 auto;
}

<script src=".3.1/jquery.min.js"></script>
<div class="circle">

</div>

My javascript is:

$(function() {
    var $elie = $(".circle");
    rotate(0);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(++degree);
        },5);
    }
}); 

How do I rotate the div around another center point?

Here's demo:

$(function() {
    var $elie = $(".circle");
    rotate(0);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(++degree);
        },5);
    }
});

.circle {
  width: 200px;
  height: 200px;
  background: green;
  border-radius: 50%;
  border: 4px dashed black;
 
  margin: calc(50vh - 100px) auto 0 auto;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circle">

</div>

• javascript
• jquery
• css

Share Improve this question Follow edited Sep 11, 2019 at 13:40 Ivanka Todorova asked Mar 4, 2013 at 15:16 Ivanka TodorovaIvanka Todorova 10.2k1717 gold badges7070 silver badges106106 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptRotating a div how to set around which point to rotateStack Overflow