CODEWITHSUNDEEP
cssgoogle-chrome
Marco Holmer
Marco Holmer

Reputation: 43

Transform rotateX/rotateY

Chrome version 39.0.2148.0

I am trying to do a flipping images effect with 2 different pictures on each side. The original idea stems from http://themestrong.com/demo/argo_wp/ (where I also see the following issue) In Chrome there seems to be an issue with the first flip. The backside image does not show before the 1st rotation is fully completed, then it appears suddenly. Every rotatation after the first one works fine. Is there something I am doing wrong in the code?

The issue does not appear in FF, what suggests to me that the code is fine and that I don't treat Chrome nice enough...

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

or in a single 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>

Upvotes: 4

Views: 491

Answers (1)

Jason Lydon
Jason Lydon

Reputation: 7180

This is your sample rewritten base 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>

*And by based on, I mean copied and pasted from.

Upvotes: 1

Related Questions