變換rotateX/rotateY

Chrome版本39.0.2148.0變換rotateX/rotateY

我試圖做兩個不同的圖片在每邊翻轉圖像效果。最初的想法源於http://themestrong.com/demo/argo_wp/（我也看到了以下問題）在Chrome中，第一次翻轉似乎存在問題。在第一次旋轉完全完成之前，背面圖像不顯示，然後突然出現。第一個之後的每個旋轉都可以正常工作。有什麼我在代碼中做錯了嗎？

的問題不會出現在FF，有什麼建議，我認爲該代碼是好的，而且我沒有把Chrome的不夠好......

看到這裏的例子 http://jsfiddle.net/xj33uaph/2/

或在單個HTML文件

<html> 
    <head> 
     <title></title> 
     <style> 
      #wrap > div { 
       position:relative 
      } 
      #wrap > div img { 
       display:block; 
       border:0; 
       margin:0; 
       padding:0; 
       position:absolute; 
       width:300px; 
       height:300px 
      } 
      #wrap .flip img { 
       backface-visibility: hidden; 
      } 
      #wrap > div { 
       width:300px; 
       height:300px 
       background: none; 
       perspective: 800px; 
       transform-style: preserve-3d; 
       transition: transform 1.5s; 
      } 
      #wrap div.flip .img2 { 
       transform: rotateY(-180deg); 
      } 
      #wrap > div.active { 
       transform: rotateY(-180deg); 
      }    
      #wrap > div.active img{ 
       visibility:visible; 
      } 
     </style> 
     <script type="text/javascript"> 
      jQuery(function($){ 
       setInterval(function(){ 
        var imgs = $('#wrap > div:not(.active):has(div.flip)'); 
        var imgs_act = $('#wrap > div.active'); 
          $(imgs[0]).addClass('active'); 
          $(imgs_act[0]).removeClass('active'); 
       },2000); 
      });       
     </script> 
    </head> 
    <body> 
     <div id="wrap"> 
      <div class=""> 
       <div class="flip"> 
       <img src="https://farm8.staticflickr.com/7106/7849428998_eed76b378a_n.jpg" alt="img1" class="img2"> 
       <img src="https://farm9.staticflickr.com/8295/7871019630_2ba8536c98_n.jpg" alt="img2" class="img1"> 
       </div> 
      </div>   
     </div> <!-- wrap -->   
    </body> 
</html>

來源

2014-09-12 Marco Holmer

當我完成之前，我按照這個教程：http://davidwalsh.name/css-flip – 2014-09-30 22:02:41

這是你的樣本改寫基地on* this。

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>derp</title> 
    <style type="text/css"> 
     * { 
     margin: 0; 
     padding: 0; 
     } 
     /* entire container, keeps perspective */ 
     .flip-container { 
     perspective: 1000; 
     } 
     /* flip the pane when hovered */ 
     .flip-container:hover .flipper, 
     .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
     } 
     .flip-container, .front, .back { 
     width: 300px; 
     height: 300px; 
     } 
     /* flip speed goes here */ 
     .flipper { 
     transition: 0.6s; 
     transform-style: preserve-3d; 
     position: relative; 
     } 
     /* hide back of pane during swap */ 
     .front, .back { 
     backface-visibility: hidden; 
     position: absolute; 
     top: 0; 
     left: 0; 
     } 
     /* front pane, placed above back */ 
     .front { 
     z-index: 2; 
     /* for firefox 31 */ 
     transform: rotateY(0deg); 
     } 
     /* back, initially hidden pane */ 
     .back { 
     transform: rotateY(180deg); 
     } 
     .flip-container:hover .flipper, 
     .flip-container.hover .flipper, 
     .flip-container.flip .flipper { 
     transform: rotateY(180deg); 
     } 
     </style> 
    </head> 
    <body> 
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
     <div class="flipper"> 
     <div class="front"> 
      <img src="https://farm8.staticflickr.com/7106/7849428998_eed76b378a_n.jpg"> 
     </div> 
     <div class="back"> 
      <img src="https://farm9.staticflickr.com/8295/7871019630_2ba8536c98_n.jpg"> 
     </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     window.setInterval(function(){ 
     document.getElementsByClassName("flip-container")[0].classList.toggle("flip"); 
     }, 2000); 
    </script> 
    </body> 
</html>

*而基於，我的意思是複製和粘貼。

來源

2014-10-01 02:39:22

謝謝，非常好！我還沒有想出實際的問題，但你的解決方案工作正常。 – 2014-10-02 09:08:03

變換rotateX/rotateY

回答

相關問題