轉換 - 無法同時旋轉並更改邊距頂端值

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-。