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

Question

我喜欢他们在premium.wpmudev.org/blog/how-to-create-a-wordpress-post-list-wonderwall-the-card-flipper/（来自queness的概念）做的css flipcard转换。所以我在我的网站上调整了它（它看起来不错），但是我实际上无法适应跨浏览器兼容性。 （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 & CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround