Я просто пытаюсь повернуть этот элемент всякий раз, когда на нем наведена мышь. но это также меняет свою позицию. пожалуйста, дайте мне знать, в чем проблема в этом коде. Я не понимаю, почему это происходит. Кто-нибудь, пожалуйста, помогите. Любая документация также принимается.
ниже мой код.
body{
background-color: black;
color:white;
height: 100vh;
}
.spinner{
height: 150px;
width: 200px;
display: inline-block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: blue;
border-radius: 50%;
transition:transform 1s ease-in;
}
.spinner span{
display: inline-block;
font-size: 1.7em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 500;
}
.spinner:hover{
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinner</title>
<link rel="stylesheet" href="spinner.css">
</head>
<body>
<div class="spinner">
<span>Click me</span>
</div>
</body>
</html>