我正在练习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吗?