Geek Answers Handbook

Convert rotateX / rotateY

Chrome Version 39.0.2148.0

I am trying to make the effect of flipping images using two different images on each side. The original idea comes from http://themestrong.com/demo/argo_wp/ (where I also see the following problem) In Chrome, there seems to be a problem with the first flip. The reverse image is not displayed until the 1st turn is completed, then it appears suddenly. Each rotation after the first works perfectly. Is there something that I am doing wrong in the code?

The problem does not appear in FF, which tells me that the code is ok and that I do not view Chrome well enough ...

see an example here http://jsfiddle.net/xj33uaph/2/

or in one HTML file

<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>
+4
1

* .

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

* , .

+1

More articles:


All Articles