6

私はこの星をその中心の周りで回転させようとしています。今のところ、それは他の点を中心に回転します。 

#question {
    font-size: 3em;
    animation: 1s linear 0s normal none infinite spin;
    display: block;
    width: 0;
}

 @keyframes spin {
     from { transform: rotate(00deg); }
     to { transform: rotate(360deg); }
 }
<div id="testWrapper"><span id="question">☆&lt;/span></div>

星がその中心を中心に回転するように修正するにはどうすればよいですか？

4

1 に答える 1

3

デフォルトtransform-originは50% 50%、あなたが望むものです。

ただし、幅を 0 に設定すると、水平方向に 0 を中心に回転します。

要素をコンテンツと同じ大きさにし、コンテンツをその内部の中央に配置する必要があります。

あなたの例では、要素をに設定してinline-block削除するだけで、width:0ほとんど修正されます。

于 2013-01-21T14:06:23.733 に答える