部分旋转后如何"unrotate"一个div？

Question

我正在旋转此 div 的文本并想知道 how/if 一旦部分旋转并且鼠标从 div 移开，是否可以慢慢取消旋转文本。

我无法将鼠标移动到 div，因为它不确定 div 将移动到哪个。

示例如下。

.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

你是说逆时针反转吗？如果是这样，您需要将所需的效果指定为默认状态。我正在使用类似的东西来制作我的徽标动画。 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（抱歉自我宣传）

Answer 2

是这样的吗？

http://jsfiddle.net/u197ymv9/

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

部分旋转后如何"unrotate"一个div？

How to "unrotate" a div after partial rotation?

html

css

rotation

transition