css - 用于激活和离开的不同 CSS3 转换 :hover in a DIV?

Question

我的问题是是否可以在同一个 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，可能无法实现。

谢谢迈克

Answer 1

可以在 :hover 上组合转换，但是您的 rotate 是 2 个完整的旋转 (360deg * 2)，所以它将是回到原来的位置。尝试更改为 20deg，您应该能够看到组合的旋转和缩放效果。一旦元素失去 :hover，您可能必须使用 JavaScript 来保持应用一个转换。