我 有 一 个 类 为 square 的 div ， 在 它 里面 ， 我 有 一 个 类 为 circle 的 div ， 正方 形 有 position: absolute ， 圆 有 position: relative ， 而且 圆 的 中心 是 相对 于 正方 形 div 的 ， 但是 当 我 用 rotate 旋转 圆 的 时候 ， 圆 失去 了 它 的 中心 位置 ， 随机 地 去 了 某 个 地方 。
HTML 语言

<div class="square">
  <div class="circle">
    Dark
  </div>
</div>

中 的 每 一 个
CSS 系统

.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  border: 1px solid black;
  position:relative;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:all 0.6s linear;
}

.square{
  width:120px;
  height:50px;
  border: 1px solid black;
  position: absolute;
  margin:50px;
  cursor:pointer;
  transition:all 0.6s linear;
}

.circle:hover{
  transform:rotateZ(200deg);
}

.square:hover{
  transform:rotateZ(360deg);
}

格式
你们 能 告诉 我 如何 解决 这个 问题 吗 ？ 为什么 会 出现 这种 情况 ？ 我 想 知道 这个 问题 是 什么 ， 是 什么 导致 了 这种 情况 ？