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

Question

我喜欢他们在 premium.wpmudev.org/blog/how-to-create-a-wordpress-post-list-wonderwall-the-card-flipper/ （来自 queness 的概念）所做的 css 翻转卡转换。所以我在我的网站上调整了它（它看起来很棒），但我真的很难调整它以实现跨浏览器兼容性。 （根据浏览器堆栈，IE 和 Opera 无法正确显示）。

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

brainstormforce 的人在他们的翻牌插件中做得很好。但我无法找到我的实施的解决方案......

您可以在 jsfiddle 中找到我的代码 - 稍微清理一下，只是为了查看函数是否正常工作：http://jsfiddle.net/X49EK/

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（为了跨浏览器的兼容性，使用 Modernizr）：

$(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');          
            }
        );

    }

});

Answer 1

DEMO HERE

backface-visibility 属性与 3D 变换有关。 Firefox 10+ 和 IE 10+ 支持不带前缀的背面可见性。 Opera（Blink 后，15+）、Chrome、Safari、iOS 和 Android 都需要 -webkit-backface-visibility。

价值观

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

hidden - 不面对屏幕时不可见。

inherit - 从其父元素获取其值。

initial - 将属性设置为其默认值，即可见。

欲了解更多信息Flip card effect for non-webkit browsers & CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround