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类中删除transform属性。然后它只会旋转。

CSS

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

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

Answer 2

您还需要在悬停时包括翻译：

.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>

如何只为变换旋转过渡

2 个答案: