css翻牌效果ie8兼容 |js附加css样式表

.flip-container, .front, .back {
width: 100px;
height: 100px;
}
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}

以上代码是一段应用于CSS翻牌效果的样式文件。在IE8中，由于不兼容CSS3的perspective属性，会使翻牌效果无法体现。解决该问题的方法是引入CSS3的角度转换滤镜属性，使其可以作为翻牌效果的额外补充效果。

.flip-container:hover .front {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand'
);
}
.flip-container:hover .back {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand'
);
}

以上是补充滤镜效果的代码。两段代码中的意思是将牌背面和牌正面进行水平镜像翻转，以达到相应翻牌效果。

通过以上这种方法，CSS翻牌效果就可以兼容IE8，让网站在更广泛的浏览器受众面前展现更出色的动态效果。