转换 - 无法同时旋转并更改边距顶端值

Question

我正在尝试使间距旋转90°并更改悬停时的页边距，但失败。

跨度不会旋转，但不会更改其边距。

HTML

<div class="cheersWrapper"> 
    <span class="cheers"> 
     <h1>Hi!</h1> 
    </span> 
    <span class="smile"> 
     <h1>&nbsp; :)</h1> 
    </span> 
</div> 

CSS

.cheersWrapper{ 
    -webkit-transition-duration: 5s; 
    -moz-transition-duration: 5s; 
    -o-transition-duration: 5s; 
    transition-duration: 5s; 
} 


.cheersWrapper .smile { 
    display: none; 
    position: relative; 
} 

.cheersWrapper:hover .smile { 
    display: inline-block; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 


    transition: margin-top .5s; 
    -webkit-transition: margin-top; 
    -moz-transition: margin-top .5s; 
    -o-transition: margin-top .5s; 

} 

.cheersWrapper:hover .smile:hover{ 

    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 

    margin-top:-25px; 

} 

.cheersWrapper .cheers{ 
    display: inline-block; 
} 

演示：http://jsfiddle.net/vmrq7ep7/3/

它看起来像它有一个不大不小的帕金森综合征，它卡住了。

我怎样才能使它的边缘动画？

在此先感谢您的帮助。

Answer 1

您可以使用该.cheersWrapper:hover .smile:hover类CSS translate，而不是保证金：

transform:rotate(90deg) translate(0,-25px); 

那么对于.cheersWrapper:hover .smile类集合：

transition-property: transform; 

编辑的jsfiddle：http://jsfiddle.net/vmrq7ep7/4/

顺便说一句，你应该IE9只需要-webkit-前缀和-ms-。