Question

我的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);
    }
});

以下是演示：http://fakeheal.eu/demo/

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

Answer 1

您可以使用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 */

FIDDLE

修改

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

transform-origin:center center;

DEMONSTRATION

旋转div如何设置中心点？

1 个答案: