让 div 在另一个 div 中转换的问题

Question

我的目标是基本上创建一个按钮，其中按钮 rotates/tilts 略微悬停但文本没有。 https://codepen.io/kyannashanice/pen/QWveOMg

我将文本和按钮分开 div 并在悬停时触发了效果，但由于某种原因，它不会将按钮和文本置于容器内的中心。我找到了解决该问题的方法，现在按钮不再轻微倾斜而是移出容器。

.container {
  height: 100px;
  width: 200px;
  position: relative;
  border-radius: 70%;
  padding-left: 50px;
  padding-top: 50px;
}

.text-overlay {
  color: black;
  font-size: 30px;
  z-index: 99;
  top: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button {
  position: absolute;
  width: 200px;
  padding: 50px;
  font-size: 16px;
  background-color: cream;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spin>button {
  display: block;
  /* removes bottom margin/whitespace */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

.container:hover .spin>button {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

<div class="container">

  <div class="spin">
    <button class="button">  </button>
  </div>

  <div class="text-overlay"> READ <br> MORE </div>

</div>

如果能帮我解决这个问题，我将不胜感激！谢谢！

Answer 1

使用您提供的代码，您只需删除 转换：translate，然后调整 顶部和左侧位置 以将文本正确放置在按钮中心的顶部。

如果该片段不是您要查找的内容，请告诉我，我可以对其进行编辑或删除答案。

.container {
 height: 100px;
  width: 200px;
  position: relative;
  border-radius: 70%;
  padding-left: 50px;
  padding-top: 50px;
}

.text-overlay {
  color: black;
  font-size: 30px;
  z-index: 99;
  position: absolute;
  top: 45%; 
  left: 45%;
}

.button {
  position: absolute;
  width: 200px;
  padding: 50px;
  font-size: 16px;
  background-color: cream;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
}

/* Spin Effect */
.spin > button {
  display: block;
  /* removes bottom margin/whitespace */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

.container:hover .spin > button {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

<div class="container">

  <div class="spin">
    <button class="button">  </button>
  </div>
  
  <div class="text-overlay"> READ <br> MORE </div>
  
</div>

让 div 在另一个 div 中转换的问题

Problem with getting div to transform within another div

html

css

transform