JPashs JPashs - 4 months ago 13
CSS Question

How to reverse a CSS3 hover transformation?

I have this css code to create a hover tranformation:

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


It works fine, but I hover out the element it get the normal style abruptly.

How can I get a smoth reverse transition to the normal style?

Answer

You can do this by adding the revert transform to the normal, non-hover state of the element's CSS. In this case, undo the rotation by rotating to 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/