为什么元素 div 也会改变它的位置答案

【问题标题】：why element div also change its position为什么元素 div 也会改变它的位置
【发布时间】：2020-04-18 14:49:31
【问题描述】：

我只是想在鼠标悬停在它上面时旋转这个元素。但它也改变了它的位置。请让我知道这段代码有什么问题。我不明白为什么会这样。任何人，请帮助。也接受任何文件。

下面是我的代码。

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>

【问题讨论】：

标签： html css transition

【解决方案1】：

发生这种情况是因为您丢失了 .spinner 元素的主要变换属性。

.spinner{
    transform: translate(-50%,-50%);
}

.spinner:hover{
    transform: rotate(180deg);
}

当您悬停时，您的平移属性将替换为旋转属性。 为了使其工作，您需要将两个转换堆叠在一行中，如下所示：

    .spinner:hover{
    transform: translate(-50%,-50%) rotate(180deg);
}

【讨论】：

【解决方案2】：

只需尝试更改 position 和 display 属性的值，它就会有希望地工作。

【讨论】：