如何在不旋转文本的情况下在悬停时旋转超棒的字体图标？

Question

我正在练习 html 但遇到问题。
首先，我的代码：

i:hover{
  transform: rotate(360deg);
  transition: 1s all;
}
i{
  transition: 1s all;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <i class="fa fa-car">This is a car.</i>
</body>
</html>

我想让我的图标在悬停在图标和文本上时旋转，但是当我悬停在这段代码上时，整个文本都会旋转。我应该怎么做才能让我的车在不旋转整条线的情况下旋转？我必须在这里使用 javascript 吗？

Answer 1

旋转创建图标的pseudo-element：

i:hover::before {
  transform: rotate(360deg);
}

i:before {
  display: inline-block;/* mandatory to be able to use transform */
  transition: 1s all;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-car">This is a car.</i>

如何在不旋转文本的情况下在悬停时旋转超棒的字体图标？

How can I rotate font-awesome icon on hover without spinning texts?

html

css

css-transforms