5

我的 javascript 是:

$(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);
    }
}); 

如何围绕另一个中心点旋转 div?

这是演示:

$(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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circle">

</div>

4

1 回答 1

8

你会用transform-origin它:

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

或者

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 */

小提琴


编辑:

要围绕.circle元素的中心旋转,首先需要一个高度,否则没有中心。然后你可以使用百分比,或者更方便的center属性,如下所示:

transform-origin:center center;

示范

于 2013-03-04T15:18:36.800 回答