css3 翻转过来,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);

}

}