Question

有人可以告诉我为什么我的图标在它应该旋转时向右移动了吗？

.rotate-icon{
  display: inline-block;
  -webkit-transition: -webkit-transform 0.6s ease-out;
  -moz-transition: -moz-transform 0.6s ease-out;
  -transition: -transform 0.6s ease-out;
} 
.rotate-icon:hover{
  display: inline-block;
 -webkit-transform: rotate(-360deg);
 -moz-transform: rotate(-360deg);
 -transform: rotate(-360deg);
}
img{
 position:absolute;
 top: 95vh;
 left:10%;
 transform: translate(-50%, -50%); 
}

JSfiddle

由于我对HTML很陌生，我无法理解为什么即使它应该旋转我也不会。我的目标是在左下方的图标上显示一个图标，该图标在悬停时旋转。

感谢您的回答。

Answer 1

您无法使用此功能：

transform: translate(-50%, -50%);

它覆盖了这个：-transform: rotate(-360deg);所以你没有好位置元素。

如果您想在撰写问题时轮换元素，则应将transform: translate(-50%, -50%);移至父元素。

Answer 2

您正在对单个项目应用两个转换，这不允许轮换工作，去掉来自img样式规则的transform: translate(-50%, -50%);，它可以像您期望的那样工作。

这是fiddle给你的

Answer 3

当您在悬停时使用translate()重新定义transform时，您将覆盖rotate()。合并这两个transform属性并设置初始rotate()以从中转换。

＆＃13;

.rotate-icon{
  display: inline-block;
	-webkit-transition: -webkit-transform 0.6s ease-out;
	-moz-transition: -moz-transform 0.6s ease-out;
	transition: transform 0.6s ease-out;
}
.rotate-icon:hover{
  display: inline-block;
	-webkit-transform: translate(-50%, -50%) rotate(-360deg);
	-moz-transform: translate(-50%, -50%) rotate(-360deg);
	transform: translate(-50%, -50%) rotate(-360deg);
}
img{
	position:absolute;
	top: 95vh;
	left:10%;
  transform: translate(-50%, -50%) rotate(0deg) ;
}

＆＃13;

<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2149-200.png" class="rotate-icon">

＆＃13;

HTML图像应在旋转时向右移动

3 个答案: