Question

我正在尝试旋转div，从顶部而不是从中心开始旋转。这是我目前正在使用的html：

<div class="circle"></div>

这是我的CSS：

.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#000;
    margin:50px auto;
    transition:all .5s ease;
}
.circle:hover{
    -webkit-transform:rotate(60deg);
}

这里需要一些指导，我应该如何进一步处理。谢谢。

Answer 1

您可以使用transform-origin属性

执行此操作

您可以详细了解here

至于你的代码，你所要做的就是

<div class="circle">
</div>

.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#000;
    margin:50px auto;
    transition:all .5s ease;
    transform-origin:top left;
    -webkit-transform-origin:top left;
    -moz-transform-origin:top left;
}
.circle:hover{
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
    transform:rotate(60deg);
}

http://jsfiddle.net/zpk2ceot/1/

Answer 2

添加

transform-origin: top left;

到您的.circle课程

Answer 3

您可以使用transform-origin:，将其设置为top left;或top;，具体取决于您希望获得的原点。（其语法出现在引用链接中）

transform-origin CSS属性允许您修改原点元素的转换。例如，变换起源 rotate（）函数是旋转的中心。（这个属性是通过首先将元素翻译为否定值来应用属性，然后应用元素的变换，然后翻译属性值。）〜MDN

＆＃13;

.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#5de;
    margin:50px auto;
    transition:all .5s ease;
    transform-origin: top;
}
.circle:hover{
    -webkit-transform:rotate(60deg);
}

＆＃13;

<div class="circle"></div>

＆＃13;

旋转HTML元素的原点

3 个答案: