Responsive Image Flipper

by Matt Hopkins

HTML

<div style="width:33%">
  <div class="de elImageWrapper de-image-block elAlign_center elMargin0 ui-droppable de-editable" id="tmp_image-67336" data-de-type="img" data-de-editing="false" data-title="image" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500"
  style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false" data-hide-on="desktop">
    <img src="https://images.clickfunnels.com/65/dfd9e0c4c511e794cf956b768f0efb/S1-Clean-1000h.png" class="elIMG ximg" alt="">
  </div>
</div>

CSS

/* --- Image Flipper ---*/

#tmp_image-67336 {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  position: relative;
}

#tmp_image-67336:hover img:first-of-type {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#tmp_image-67336:hover img:nth-of-type(2) {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

#tmp_image-67336 img:first-of-type,
#tmp_image-67336 img:nth-of-type(2) {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  float: left;
}

#tmp_image-67336 img:first-of-type,
#tmp_image-67336 img:nth-of-type(2) {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
}

#tmp_image-67336 img:nth-of-type(2) {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#tmp_image-67336 img#imgFlipHack {
  position: relative;
  opacity: 0;
}

JavaScript

var $imgHack = $('#tmp_image-67336').find('img').first().clone();
    $imgHack.attr('id', 'imgFlipHack');

    $('#tmp_image-67336').append('<img src="https://images.clickfunnels.com/93/1f93c0c9a011e780ed434488c20d67/S1-Left-Clean-1000h.png" class="elIMG ximg" alt="">');
    $('#tmp_image-67336').append($imgHack);