变换rotateX/rotateY答案

【问题标题】：Transform rotateX/rotateY变换rotateX/rotateY
【发布时间】：2014-10-01 10:39:22
【问题描述】：

Chrome 版本 39.0.2148.0

我正在尝试使用每侧 2 张不同的图片来制作翻转图像效果。最初的想法源于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>

【问题讨论】：

当我以前做过时，我按照这个教程：davidwalsh.name/css-flip

标签： css google-chrome

【解决方案1】：

这是您的示例重写基础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>

*基于，我的意思是复制和粘贴。

【讨论】：

谢谢，非常好！我还没有弄清楚实际的问题，但是您的解决方案可以正常工作。