Javascript Flipcard CSS 3D过渡：IE/Opera兼容性解决方案？

我喜欢他们在premium.wpmudev.org/blog/how-to-create-a-wordpress-post-list-wonderwall-the-card-flipper/（来自queness的概念）上进行的css flipcard转换。所以我在我的网站上修改了它（看起来很棒），但我真的很难适应跨浏览器的兼容性。（IE和Opera没有根据browserstack正确显示）

有谁能帮我调整代码，它在无法运行的浏览器上被替换，并且在所有支持3D CSS转换的浏览器上运行？那将是一个很大的帮助

这家公司的伙计们在他们的flipcard插件中做得很好。但我无法找到实现的解决方案

您可以在JSFIDLE中找到我的代码-稍微清理一下，看看函数是否正常工作：

HTML：在jsfiddle中

CSS：

    .thumb {
    /* display:block; - to be able to use display:hidden in parent for responsiveness */
    position:relative;
    margin-bottom:20px;
    margin-right:20px;
    float:left;
    width:200px;
    height:200px;
    }

    .thumb-wrapper {
    display:block;
    width:100%;
    height:100%;
    }

    /* Front */
    .thumb .thumb-front {
    width:100%;
    height:100%;
    position:absolute;
    display:block;
    background:#ff3030;
    color:#ffffff;
    border-color:#ffffff;
    padding-top:50px;
    }

    /* Back */
    .thumb .thumb-detail {
    display:block;
    width:100%;
    height:100%;
    position:absolut;
    background:#ffffff;
    left:0;
    top:0;

    border-width:1px; !important;
    border-color:#ff6600; !important;
    border-style:solid;
    padding:15px;
    }

    /* Back Header */
    .thumb .thumb-detail-header {
    font-size: 16px;!important;
    margin-bottom:5px;
    text-align:left;
    }

    /* Back Text */
    .thumb .thumb-detail, .thumb .thumb-detail p {
    font-size: 13px;!important;
    color: #595959;!important;
    line-height: 1.4em;!important;
    text-align:justify;   
    }


    /*
    * Without CSS3
    */
    .thumb.scroll {
    overflow: hidden;
    }

    .thumb.scroll .thumb-detail {
    bottom:-400px;
    }

    /*
    * CSS3 Flip
    */
    .thumb.flip {
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    }

    .thumb.flip .thumb-wrapper {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -moz-transform 1s;
    -o-transition: -moz-transform 1s;
    transition: -moz-transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }

    .thumb.flip .thumb-detail {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    }

    .thumb.flip .thumb-front,
    .thumb.flip .thumb-detail {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    .thumb.flip .flipIt {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    }

Javascript（为了实现跨浏览器兼容性，使用Modernizer）：

backface visibility

属性与三维变换相关。 Firefox 10+和IE 10+支持无前缀的背面可见性。Opera（后闪烁，15+），Chrome，Safari，iOS和Android都需要-webkit背面可见性

价值观

可见

（默认）-即使不面对屏幕，也始终可见

隐藏

-不面对屏幕时不可见

inherit

-从其父元素获取其值

initial

-将属性设置为其默认值（可见）

---

有关更多信息&

链接演示与IE10或11不兼容，仅显示背面的正面。

$(function () {


    if ($('html').hasClass('csstransforms3d')) {    

        $('.thumb').removeClass('scroll').addClass('flip');     
        $('.thumb.flip').hover(
            function () {
                $(this).find('.thumb-wrapper').addClass('flipIt');
            },
            function () {
                $(this).find('.thumb-wrapper').removeClass('flipIt');           
            }
        );

    } else {

        $('.thumb').hover(
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
            },
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');          
            }
        );

    }

});