Question

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

任何人都可以帮我调整代码，将其替换为无法运行的浏览器，并在支持3D CSS转换的所有浏览器上运行吗？这将是一个很好的帮助！

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

你在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＆amp; CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Flipcard CSS 3D Transition：兼容IE / Opera的解决方案？

1 个答案: