css3 翻转兼容ie8 |css 选择器游戏

CSS3提供了多种翻转的效果，可以让网站更具动感，但是在IE8及以下版本浏览器中不支持CSS3的翻转效果，这就需要大家兼容IE8。

大家可以使用IE8中的DX滤镜来实现CSS3翻转效果的兼容，这里大家介绍两种兼容方法。

方法一：

.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
transform: rotateY(180deg);
}
.flip:hover {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform:rotateY(360deg);
transform: rotateY(360deg);
filter: flipH flipV;
}

方法一中，大家使用了CSS3中的transform属性来实现3D翻转效果，同时添加了DX滤镜，以兼容IE8及以下版本浏览器。但是这种方法兼容性不是很好，因为IE8中flipH和flipV对应的属性不一样，会导致翻转效果出现问题。

方法二：

.flip {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 2;
position: relative;
}
.flip * {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip .flip-back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

方法二中，大家保留了CSS3中的transform-style和transition属性，同时使用了position和z-index属性，将翻转的正面和背面进行了层叠处理，以避免出现闪烁的情况。这种方法可以在IE8及以下版本浏览器中完美兼容，翻转效果也非常流畅。

以上两种方法都可以实现CSS3的翻转效果在IE8及以下版本浏览器中的兼容，但是方法二更为稳定，更能满足大家的需求。