.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);
    }
}

　　

總結(jié)

以上是生活随笔為你收集整理的CSS3 水平翻转的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。