如何在光标悬停时旋转图像并保持旋转？
全永灿
这是下面屏幕截图中圆形标志图标的问题。我希望它顺时针旋转 45 度并保持它以 + 形状旋转，只要光标悬停在图像上；然后在光标离开图像时向后逆时针旋转。
这是我到目前为止编写的代码。悬停时，图像正确旋转 45' cw，但它会立即返回 X 形状。
#icon{
display: inline-block;
margin: 0 auto 0 0;
width: 2.4em;
height: 2.4em;
}
#icon:hover{
-webkit-animation:cw 0.4s linear 1;
-moz-animation:cw 0.4s linear 1;
animation:cw 0.4s linear 1;
}
@-moz-keyframes cw { 100% { -moz-transform: rotate(45deg); } }
@-webkit-keyframes cw { 100% { -webkit-transform: rotate(45deg); } }
@keyframes cw { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }
@-moz-keyframes ccw { 100% { -moz-transform: rotate(-45deg); } }
@-webkit-keyframes ccw { 100% { -webkit-transform: rotate(-45deg); } }
@keyframes ccw { 100% { -webkit-transform: rotate(-45deg); transform:rotate(-45deg); } }
那么我该如何解决这个问题呢？我认为#icon应该稍微修改一下，因为即使在旋转后它也可能保持其原始状态。
芜菁
使用 atransition而不是keyframes动画：
img {
transition: all .2s ease;
transform: rotate(0deg)
}
img:hover {
transform: rotate(45deg)
}<img src="https://placehold.it/100x100">本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
悬停时旋转或旋转图像
- 2
如何在CSS3中连续旋转图像？不仅在悬停时
- 3
如何在悬停时保持图像恒定
- 4
旋转时如何将图像保持在原始位置
- 5
悬停时，按间隔旋转图像-仅影响悬停的项目
- 6
在悬停/鼠标悬停时旋转从 api 下载的图像
- 7
悬停时循环旋转
- 8
如何在每次单击按钮时旋转imageview中的图像？
- 9
在反向移动期间如何保持图像旋转？
- 10
在悬停div上旋转图像
- 11
如何根据光标位置旋转图像并使其工作？
- 12
如何根据光标位置旋转图像并使其工作？
- 13
如何在单击时旋转图像，然后再次单击后旋转回图像？使用HTML，CSS和jQuery
- 14
停止旋转时如何检测图像的位置？
- 15
旋转时如何编辑图像尺寸？
- 16
如何在CommandField中旋转图像
- 17
如何在angularjs中旋转图像
- 18
如何在SSRS中旋转图像
- 19
如何在Pygame中“裁剪”旋转图像
- 20
如何在LibGDX中正确旋转图像？
- 21
如何在圆形路径中旋转图像
- 22
如何在 GridView 中旋转图像
- 23
如何在 TouchableOpacity 中旋转图像
- 24
WPF如何在屏幕旋转时禁用某些元素的旋转？
- 25
WPF如何在屏幕旋转时禁用某些元素的旋转？
- 26
移动鼠标光标时如何旋转角色头部？
- 27
如何在Android中旋转图像并在按下按钮时随机停止图像
- 28
如何在旋转图像CSS或Javascript时使背景图像填充空白（在div上）？
- 29
如何在Android中旋转图像并在按下按钮时随机停止图像
我来说两句