如何在部分旋转后“旋转”div？

Question

Im旋转这个div的文本，并想知道如何可能缓慢地旋转文本，一旦部分旋转和鼠标从div移动。

我不能将鼠标移动到div上，因为它不知道哪个div将被移动到。

示例如下。

http://jsfiddle.net/ofgyz7f7/

.reblogbutton{ 
position:relative; 
display:table; 
color:black; 
width:60px; 
height:60px; 
border-radius:32px; 
border: solid 2.5px black; 
text-align:center; 
margin:auto; 
top:2.5px; 
background-color:#B19CD9; 


} 

.reblogbutton a{ 
display:table-cell; 
color:black; 
vertical-align:middle; 
} 

.reblogbutton a:hover{ 
transform:rotate(360deg); 
-o-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-webbkit-transform:rotate(360deg); 
    transition: all 1.2s ease; 
    -webkit-transition: all 1.2s ease; 
    -moz-transition: all 1.2s ease; 
    -o-transition: all 1.2s ease; 
} 

Answer 1

这样的事情？

http://jsfiddle.net/u197ymv9/

.reblogbutton a{ 
    display:table-cell; 
    color:black; 
    vertical-align:middle; 
    transform:rotate(0deg); 
    transition: all 1.2s ease; 
} 

Answer 2

你的意思是恢复反顺时针方向？如果是这样，您需要将预期的效果指定为默认状态。我正在使用类似的动画来激活我的标志。 CSS的云，像这样：

#logo { 
    width: 3.000em; 
    height: 3.000em; 
    float: right; 
    transition: transform 0.5s; 
    transform: rotate(-360deg); 
} 

#logo:hover { 
    transition: transform 0.5s; 
    transform: rotate(360deg); 
} 

结果是在我的网站在phclaus.eu.org（对不起，自我宣传）