CSS动画将元素自身旋转360度，使元素围绕自身旋转

Question

我对以下内容感到不知所措。

我在HTML页面上有一个齿轮图标，我想像现实世界中的齿轮一样在其上旋转

我已经创建了一个CSS动画来控制旋转，但问题是齿轮不是自己旋转而是稍微旋转，从而也改变了它的位置。

这是我的代码和代码笔链接。

<script src="https://kit.fontawesome.com/c01f624491.js" crossorigin="anonymous"></script>
<div class="setting">
<ul class="setting__menu">
<li><a href="#"><i class="fas fa-cog fa"></i></a></li>
</ul>
</div>

.setting {
align-self: flex-end;
margin-top: -4rem;
margin-right: -2rem; }
.setting__menu {

padding: 2rem 1rem;
border-radius: 20px; }
.setting li {
list-style: none;
margin: 0 5px;
position: relative; 
}
.setting li a {
animation: cog-spin infinite 3s linear;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: cog-spin; }
.setting li a {
font-size: 1.9rem;
text-decoration: none;
color: #00BFA6;
height: 4.5rem;
width: 4.5rem;
padding: 2rem;
display: block; }
@keyframes cog-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } 
}

https://codepen.io/Helye23/pen/WNxxbzg

Answer 1

您可以通过给图标一个id 来旋转图标本身

<i id="cog" class="fas fa-cog fa"></i>

然后将变换原点设置为中心

#cog {
transform-origin: center;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: cog-spin; 
}