How to make ☆ spin around the centre?

2018-06-03 11:06:28

I'm trying to make this star spin around it's centre. For now it spins around some other point.

http://dharman.eu/test/test3.php

#question {
    animation: 1s linear 0s normal none infinite spin;
    display: block;
    width: 0;
}

 @-moz-keyframes spin { 
     from {-moz-transform: rotate(00deg); } 
     to {-moz-transform: rotate(360deg);}
 }

How can I fix it so the star spins around its centre?

The default transform-origin is 50% 50% which is what you want.

But you set the width to 0, and so it rotates around 0 in the horizontal direction.

You need to make your element be as large as the contents and also make the contents centered inside it.

In your example just setting the element to inline-block and removing the width:0 will almost fix it.

链接地址: http://www.djcxy.com/p/11774.html

上一篇: 如何创建对象并填充外部集合？

下一篇: 如何让☆在中心旋转？