CSS3 水平翻转

.button_1:hover #button1_img,.button_2:hover #button2_img{
    box-shadow: 0 0 10px #9AFE2E;
    animation: rotate-x 0.4s;
    -moz-animation: rotate-x 0.4s;	/* Firefox */
    -webkit-animation: rotate-x 0.4s;	/* Safari 和 Chrome */
    -o-animation: rotate-x 0.4s;	/* Opera */
}

@keyframes rotate-x {
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
/*  IE  */
@-ms-keyframes rotate-x {
    50% {
        -ms-transform: scaleX(0);
    }
    100% {
        -ms-transform: scaleX(1);
    }
}
/* Safari and Chrome*/
@-webkit-keyframes rotate-x {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}
/* Firefox  */
@-moz-keyframes rotate-x {
    50% {
        -moz-transform: scaleX(0);
    }
    100% {
        -moz-transform: scaleX(1);
    }
}
/*  Opera  */
@-o-keyframes rotate-x {
    50% {
        -o-transform: scaleX(0);
    }
    100% {
        -o-transform: scaleX(1);
    }
}

　　

转载于:https://www.cnblogs.com/mypsq/p/7021464.html