用于激活和离开 :hover 在 DIV 中的不同 CSS3 转换？
我的问题是是否可以在同一个 DIV 上运行 2 个不同的 CSS3 转换？我希望能够在悬停时旋转并增加比例（按照下面的代码），但是当释放悬停时，div 会缩小而不旋转到其原始大小。
#listitem ul li {
float: left;
margin: 0 15px 0 15px;
padding: 0;
}
#listitem ul li:hover{
-webkit-transform: rotate(720deg) scale(1.5);
-moz-transform: rotate(720deg) scale(1.5);
-ms-transform: rotate(720deg) scale(1.5);
-o-transform: rotate(720deg) scale(1.5);
transform: rotate(720deg) scale(1.5);
}
由于部分旋转时如何处理 DIV，这可能是不可能的。
谢谢 麦克风
My question is whether it is possible to have 2 different CSS3 transitions operating on the same DIV? I'd like to be able to have a rotate and increase in scale on hover (as per the code below) but then when the hover is released for the div to just scale back, without rotating, to its original size.
#listitem ul li {
float: left;
margin: 0 15px 0 15px;
padding: 0;
}
#listitem ul li:hover{
-webkit-transform: rotate(720deg) scale(1.5);
-moz-transform: rotate(720deg) scale(1.5);
-ms-transform: rotate(720deg) scale(1.5);
-o-transform: rotate(720deg) scale(1.5);
transform: rotate(720deg) scale(1.5);
}
It may not be possible due to how to treat the DIV when it is partially rotated.
Thanks
Mike
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可以在
:hover上组合转换，但您的rotate是 2 个完整旋转 (360deg * 2)，因此它将返回到原来的位置。尝试更改为20deg，您应该能够看到组合的旋转和缩放效果。一旦元素失去:hover，您可能必须使用 JavaScript 来保持应用的转换。It is possible to combine the transitions on
:hoverbut yourrotateis 2 full rotations (360deg * 2) so it will be back in the original position. Try changing to20degand you should be able to see the combined rotation and scaling effects. You may have to use JavaScript to keep one transition applied once the element loses the:hover.这是可能的，但是当div在悬停时旋转一定角度..当释放悬停时，它以相反的旋转方向旋转回来并返回到初始阶段..是的，可以应用多重效果
it is possible but as the div rotate with certain angle while hover .. when hover is released it rotated back in opposite rotation and goes back to initial stage.. yes multiple effect can be applied