Html 旋转对象上的css动画

我在元素上应用旋转，悬停在元素上时，我应用动画。问题是，悬停时，元素返回其原始位置，然后设置动画，然后在设置动画后返回旋转位置。我不希望那个元素回到它原来的位置，但它应该保持在旋转的位置上。还有一件事，我还将改变javascript的旋转，所以它不会被固定，因此它不应该成为动画的一部分。这是我的密码：

@-webkit关键帧hvr增长{
100% {
-webkit转换：比例（1.4）；
转换：比例（1.4）；
}
}
@关键帧hvr增长{
100% {
-webkit转换：比例（1.4）；
转换：比例（1.4）；
}
}
.街区{
宽度：100px；
高度：100px；
背景色：红色；
边框：1px纯黑；
变换：旋转（45度）；
利润率：30像素；
}
.block:悬停{
-webkit动画名称：hvrgrow；
动画名称：hvrgrow；
-webkit动画持续时间：0.3s；
动画持续时间：0.3s；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画填充模式：正向；
动画填充模式：正向；
}

---

还应包括关键帧上的旋转。这是你最新的小提琴

@-webkit关键帧hvr增长{
100% {
-webkit变换：旋转（45度）比例（1.4）；
变换：旋转（45度）比例（1.4）；
}
}
@关键帧hvr增长{
100% {
-webkit变换：旋转（45度）比例（1.4）；
变换：旋转（45度）比例（1.4）；
}
}
.街区{
宽度：100px；
高度：100px；
背景色：红色；
边框：1px纯黑；
变换：旋转（45度）；
利润率：30像素；
}
.block:悬停{
-webkit动画名称：hvrgrow；
动画名称：hvrgrow；
-webkit动画持续时间：0.3s；
动画持续时间：0.3s；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画填充模式：正向；
动画填充模式：正向；
}

---

嘿，我认为您应该使用javascript来获得这种效果，因为当您将鼠标移离元素时，该元素将丢失其“：hover”伪类，这就是它返回的原因。填充模式仅在鼠标仍在元素上时工作。希望这会有帮助

片段：

$（“#块”）.hover（函数（）{
$（“#块”）.addClass（“旋转”）；
});
@-webkit关键帧hvr增长{
0% {}
100% {
-webkit变换：缩放（1.4）旋转（45度）；
变换：缩放（1.4）旋转（45度）；
}
}
@关键帧hvr增长{
0% {}
100% {
-webkit变换：缩放（1.4）旋转（45度）；
变换：缩放（1.4）旋转（45度）；
}
}
#挡块{
宽度：100px；
高度：100px；
背景色：红色；
边框：1px纯黑；
利润率：30像素；
}
.轮换{
背景颜色：蓝色；
-webkit动画名称：hvrgrow；
动画名称：hvrgrow；
-webkit动画持续时间：0.3s；
动画持续时间：0.3s；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
-webkit动画填充模式：正向；
动画填充模式：正向；
}

我不希望该元素回到其原始位置，但它应该在旋转位置上设置动画
。？？你想让它在动画之后回到原始位置吗？不。我不想让元素回到原始位置。我改变了javascript的旋转，所以它不会被固定，因此它不应该成为动画的一部分。@AbdullahDanyal如果这样会怎么样。将元素放入包装器中。使用javascript旋转元素。然后将悬停缩放动画放在包装器上这真是个好主意：）我会试试