Question

我有这个css代码来创建悬停转换：

.my-field:hover{
transition: 0.4s;
transform: rotateY(180deg) translate(0px, -5px);
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg);
}

它工作正常，但我突然将元素突然变为正常风格。

如何让smoth 反向过渡到正常风格？

Answer 1

您可以通过将revert变换添加到元素CSS的正常非悬停状态来完成此操作。在这种情况下，通过旋转到0deg来撤消旋转：

.my-field {
    transition: 0.4s;
    transform: rotateY(0deg) translate(0px, -5px);
    -ms-transform: rotateY(0deg); /* IE 9 */
    -webkit-transform: rotateY(0deg);
}

.my-field:hover{
    transition: 0.4s;
    transform: rotateY(180deg) translate(0px, -5px);
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg);
}

http://jsfiddle.net/j7Lvd7km/

如何反转CSS3悬停转换？

1 个答案: