IE9中背景图片的html div翻转效果

我正在开发一个功能，用于翻转背景图片的div。当我翻转div时，应该在另一侧有一个新的图像。IE9中背景图片的html div翻转效果

我曾尝试以下jQuery插件，其结果是：

Flippy：它在IE10，Chrome和Firefox的工作很不错，但它不是在IE9正常工作这使得图像消失，翻转灰色的彩色div。
翻转！：它使图像消失并翻转灰色的div。
图像翻转：2D倒装
快速翻转：2D倒装
rotate3di：三维倒装但看起来像我们是从一定角度观看。

请在IE9中建议翻转div的方法。任何帮助将不胜感激

来源

2013-08-27 AkshayP

请小提琴，并显示你的代码:) –

我加入的代码上http://jsfiddle.net/Akshay2409/r5xMC/ – AkshayP

@AkshayP你加excanvas.js文件。？ –

CSS转换是你的代码不能在IE9中工作的原因。 CSS转换用于通过更改CSS来设置对象的动画效果（不需要JavaScript）。 jQuery.flippy.js使用它来动画物体。可悲的CSS过渡来自IE9之后，因此它不支持CSS转换。

我过去曾经遇到类似的问题（http://bitotsav.in/#!/shows），我选择为IE9和更低版本提供一些微不足道的动画。

但是，如果你想对IE9翻转动画然后访问 Flip card effect for non-webkit browsers

上面的链接可能包含某些问题的解决方案。

来源

2013-09-10 21:15:01 Pushkar

对于FF和铬，我摆弄这里：
http://jsfiddle.net/RXU84/

但是，我无法测试它在IE浏览器，因为我没有获得现在。
多亏了这家伙在这里.. David

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
      <img src="http://i.imgur.com/FrJqOAP.jpg"/> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
      <img src="http://i.imgur.com/eIkgvPL.jpg"/> 
     </div> 
    </div> 
</div>

CSS

 /* simple */ 
    .flip-container { 
     -webkit-perspective: 1000; 
     -moz-perspective: 1000; 
     perspective: 1000; 

     border: 1px solid #ccc; 
    } 


     .flip-container:hover .flipper, 
        .flip-container.hover .flipper, #flip-toggle.flip .flipper { 
      -webkit-transform: rotateY(180deg); 
      -moz-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
      filter: FlipH; 
      -ms-filter: "FlipH"; 
     } 

    .flip-container, .front, .back { 
     width: 320px; 
     height: 427px; 
    } 

    .flipper { 
     -webkit-transition: 0.6s; 
     -webkit-transform-style: preserve-3d; 

     -moz-transition: 0.6s; 
     -moz-transform-style: preserve-3d; 

     transition: 0.6s; 
     transform-style: preserve-3d; 

     position: relative; 
    } 

    .front, .back { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     backface-visibility: hidden; 

     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .front { 
     background: lightgreen; 
     z-index: 2; 
    } 

    .back { 
     background: lightblue; 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
    } 

    .front .name { 
     font-size: 2em; 
     display: inline-block; 
     background: rgba(33, 33, 33, 0.9); 
     color: #f8f8f8; 
     font-family: Courier; 
     padding: 5px 10px; 
     border-radius: 5px; 
     bottom: 60px; 
     left: 25%; 
     position: absolute; 
     text-shadow: 0.1em 0.1em 0.05em #333; 

     -webkit-transform: rotate(-20deg); 
     -moz-transform: rotate(-20deg); 
     transform: rotate(-20deg); 
    }

来源

2013-09-16 21:34:43 TheAshwaniK

我认为这是你需要看到这个演示什么：FLIPPING CIRCLE SLIDESHOW

它是f不仅仅是图像，还有简单的代码，您可以自定义它，以便您拥有所需的内容。

希望这会有所帮助。

来源

2013-09-17 01:15:49

重新您的（现在删除）元问题：某种类型的警告正在讨论，并可能会在某些时候实施 –

我找到[the的计划开发者]（http://meta.stackexchange.com/a/211307/220332） –

试试这个...

#skew {

transform：skew（35deg）; }

#scale {

transform：scale（1,0.5）; }

#rotate {

transform：rotate（45deg）; }

#translate {

transform：translate（10px，20px）; }

#rotate-skew-scale-translate {

变换：歪斜（30度）规模（1.1,1.1）旋转（40deg）平移（10px的，20像素）; }

来源

2013-09-17 05:30:14

编辑： 这是否在IE9工作，IE只是单纯讨厌的jsfiddle并拒绝使其工作。换句话说，死于IE！

我会推荐使用帆布！如果您的画布是100x100，并且您在画布上加载100x200一半的图片将会在外面。当你翻转图像时，其他部分将显示（虽然它会翻转，所以原始图像将不得不翻转）。

http://jsfiddle.net/H82Tq/1/

var c = document.getElementById("joker"); 
var ctx = c.getContext("2d"); 
var img = document.createElement('img'); 
img.src = 'http://i.istockimg.com/file_thumbview_approve/7625283/2/stock-illustration-7625283-joker-face-two-playing-card.jpg'; 


var b = false; 
$(c).click(function(){ 
    if (b) { 
     ctx.drawImage(img, -246, 0, 246, 380); 
    } else { 
     ctx.drawImage(img, 0, 0, 246, 380); 
    } 

    b = !b; 
    ctx.scale(-1, 1); 
}).click();

来源

2013-09-17 10:40:36 Cammy

IE9中背景图片的html div翻转效果

回答

相关问题