css - 如何过渡只是为了变换旋转

Question

我有一个必须在悬停事件中旋转的 HTML 元素。看看代码。我不想要 translateX 的过渡。我只想要旋转过渡。我应该怎么办？？

.cog {
    margin-top: 250px;
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.cog:hover {
    transform: rotate(-.4turn);
}

Answer 1

您还需要在悬停时包含翻译:

.cog {
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width:50px;
  height:50px;
  background:red;
}

.cog:hover {
  transform: translateX(-50%) rotate(-.4turn);
}

<div class="cog"></div>