Css 变换rotateX/rotateY_Css_Google Chrome

Css 变换rotateX/rotateY

css google-chrome

Css 变换rotateX/rotateY,css,google-chrome,Css,Google Chrome,Chrome版本39.0.2148.0 我试图做一个翻转图像的效果，每面有两张不同的图片。最初的想法来源于（我也看到了以下问题）在Chrome中，第一次翻转似乎存在问题。在第一次旋转完全完成之前，背面图像不显示，然后突然出现。第一次旋转后的每次旋转都很好。代码中是否有我做错的地方这个问题没有出现在FF中，是什么让我觉得代码很好，我对Chrome不够好参见这里的示例或者在单个HTML文件中 <html> <head> <title&

Chrome版本39.0.2148.0

我试图做一个翻转图像的效果，每面有两张不同的图片。最初的想法来源于（我也看到了以下问题）在Chrome中，第一次翻转似乎存在问题。在第一次旋转完全完成之前，背面图像不显示，然后突然出现。第一次旋转后的每次旋转都很好。代码中是否有我做错的地方

这个问题没有出现在FF中，是什么让我觉得代码很好，我对Chrome不够好

参见这里的示例

或者在单个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>


#包裹>分割{
职位：相对
}
#包裹>div img{
显示：块；
边界：0；
保证金：0；
填充：0；
位置：绝对位置；
宽度：300px；
高度：300px
}
#包裹，翻转{
背面可见性：隐藏；
}
#包裹>分割{
宽度：300px；
高度：300px
背景：无；
透视图：800px；
变换样式：保留-3d；
转型：转型1.5s；
}
#包裹div.flip.img2{
变换：旋转（-180度）；
}
#包裹>分区活动{
变换：旋转（-180度）；
}            
#包裹>div.active img{
能见度：可见；
}
jQuery（函数（$）{
setInterval（函数（）{
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);
});

这是您的样本重写库


德普
* {
保证金：0；
填充：0；
}
/*整个容器，保持透视*/
.翻转容器{
前景：1 000；
}
/*悬停时翻转窗格*/
.flip容器：悬停.flipper，
.flip-container.hover.flipper{
变换：旋转（180度）；
}
.翻转容器，.正面，.背面{
宽度：300px；
高度：300px；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
/*对于Firefox31*/
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
}
.flip容器：悬停.flipper，
.flip-container.hover.flipper，
.flip-container.flip.flipper{
变换：旋转（180度）；
}
setInterval（函数（）{
document.getElementsByClassName（“翻转容器”）[0].classList.toggle（“翻转”）；
}, 2000);

*我所说的“基于”，是指从中复制和粘贴。

当我以前完成此操作时，我遵循了本教程：谢谢，非常好！我还没有弄清楚实际的问题，但你的解决方案很好。

<!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>