Html 如何将“悬停时旋转”和“悬停时生长”组合成一个具有固定轴的CSS动画？

我希望这两个动画都在悬停时执行，然后在光标移动后重置，就像下面的旋转动画一样。所以我只需要将“生长”动画与关键帧结合起来，还是？有什么建议吗？谢谢

#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
#旋转图像：悬停{
变换：旋转（360度）；
-ms变换：旋转（360度）；
-webkit变换：旋转（360度）；
}

---

因此，只有在您知道起点和终点高度的情况下，此操作才有效。。。但基本上，高度过渡必须使用“最大高度”影响。下面的示例假设您希望它从100px->400px增长。如果需要动态高度，请告诉我

#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
高度：400px；
最大高度：100px；
-webkit过渡：所有.8都易于输入输出；
-ms转换：所有.8s易于输入输出；
过渡：所有.8都易于输入输出；
}
#旋转图像：悬停{
最大高度：400px；
变换：旋转（360度）；
-ms变换：旋转（360度）；
-webkit变换：旋转（360度）；
}

---

因此，只有在您知道起点和终点高度的情况下，此操作才有效。。。但基本上，高度过渡必须使用“最大高度”影响。下面的示例假设您希望它从100px->400px增长。如果需要动态高度，请告诉我

#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
高度：400px；
最大高度：100px；
-webkit过渡：所有.8都易于输入输出；
-ms转换：所有.8s易于输入输出；
过渡：所有.8都易于输入输出；
}
#旋转图像：悬停{
最大高度：400px；
变换：旋转（360度）；
-ms变换：旋转（360度）；
-webkit变换：旋转（360度）；
}

尝试查看，还请注意，您可以使用多个

#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
#旋转图像：悬停{
变换：旋转（360度）比例（2）；
-ms变换：旋转（360度）刻度（2）；
-webkit变换：旋转（360度）比例（2）；
}

尝试查看，还请注意，您可以使用多个

#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
#旋转图像：悬停{
变换：旋转（360度）比例（2）；
-ms变换：旋转（360度）刻度（2）；
-webkit变换：旋转（360度）比例（2）；
}

---

要执行此操作，可以在

转换中放置两种方法，如下所示：


#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
#旋转图像：悬停{
-ms变换：旋转（360度）比例（2,2）；
-webkit变换：旋转（360度）比例（2,2）；
变换：旋转（360度）比例（2,2）；
}
要执行此操作，可以在
转换中放置两种方法，如下所示：


#旋转图像{
位置：绝对位置；
左：70像素；
顶部：100px；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
#旋转图像：悬停{
-ms变换：旋转（360度）比例（2,2）；
-webkit变换：旋转（360度）比例（2,2）；
变换：旋转（360度）比例（2,2）；
}
这正是我想要的，但是有没有一种方法可以让它保持在一个固定的轴上，而不会向外移动太多。i、 e.像一个正在膨胀的风车旋转吗？@AndreasLambadarios尝试得很好不，问题不是旋转，问题实际上与绝对定位有关。因为这是设置，你将有结束图片也有其左和顶部的定位设置。因此，图像的左上角将位于同一位置@安德烈亚斯兰巴达里奥斯我想你会希望中锋保持同样的位置吗？@pasquers你说得对。是的，我想让中锋保持在原来的位置。这正是我想要的，但是有没有一种方法可以让它保持在一个固定的轴上，而不会移动太多。i、 e.像一个正在膨胀的风车旋转吗？@AndreasLambadarios尝试得很好不，问题不是旋转，问题实际上与绝对定位有关。因为这是设置，你将有结束图片也有其左和顶部的定位设置。