Jus*_*ser 3 html css css3 css-transforms
我正在练习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吗？
旋转创建图标的伪元素：
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>| 归档时间： |
|
| 查看次数： |
1127 次 |
| 最近记录： |