Question

我有一个关闭图标，我想在其悬停时旋转。旋转发生但不是从中心点开始。尝试transform-origin : 50% 50%和center属性，但仍然没有发生。提到我的代码以及与小提琴的链接。

<div>

</div>



div{
  background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat;
  height:16px;
  width:16px;
  transform:rotate(0);
  transition:transform .3s ease
}
div:hover{
  transform:rotate(90deg)
}

以下是fiddle

Answer 1

您的问题似乎是图片提供的背景与<div>的尺寸不同。默认情况下，旋转以50％50％完成，但由于背景图像覆盖左上角，因此旋转90º时，它将最终位于右上角。

我更新了您的jsfiddle以使div与图像的大小匹配，即10px。现在它正在围绕背景图像和div之间的共享中心正确旋转。

编辑。另外，正如其他人所指出的那样，您可以使用background-position: center center;将背景图像居中，这样可以达到相同的效果，并为您的div和背景图像提供一个共同的中心。

Answer 2

将background-position设为center和transform-origin: 50% 50%。

Updated JSFiddle

Answer 3

在CSS中使用transform-origin:来设置原点....

div{
  background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat center center;
  height:16px;
  width:16px;
  transform-origin: 50% 50%;
  transform:rotate(0);
  transition:transform .3s ease
}
div:hover{
  transform-origin: 50% 50%;
  transform:rotate(90deg)
}

将背景图像居中。

Fiddle update

Answer 4

您的图片未居中。只做网址（＆＃39; https://s32.postimg.org/4ze7aqwed/close.png＆＃39;）无重复中心;

Answer 5

试试这个

div{
  background:url('https://s32.postimg.org/4ze7aqwed/close.png') no-repeat center center;
  height:10px;
  width:10px;
  transform:rotate(0);
  transition:transform .3s ease


}
div:hover{
  transform:rotate(90deg);

}

Answer 6

只需将background-position : center;添加到div CSS即可设置背景图片位置....

图像旋转不是源自中心

6 个答案: