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翻轉效果

回答

相關問題