Flipping Div Jquery

by wamosjk

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h1>Flip This Div</h1>
<p>Scroll Down And Click The Button</p>

<div class="flip-container">
  <div id="front" class="flip">This is side 1</div>
  <div id="back" class="flip">This is side 2</div>
</div>
<button>Flip It</button>

CSS

.flip-container{
  height:200vh;
  position:relative;
}
.flip{
  height:100%;
  width:100%;
  position: absolute;
  top:0;
  left:0;
  border:1px solid #000;
  transform-origin;               50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
  transition: all 3s;
        -moz-transition:    all 3s;
        -ms-transition:     all 3s;
        -o-transition:      all 3s;
        -webkit-transition: all 3s;
  backface-visibility:hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;

}
#front{
  background:red;
  color:white;
  transform;               rotateY(0deg);
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}
#back{
  background:blue;
  color:white;
  transform;               rotateY(180deg);
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}
.flipped #front{
  transform;               rotateY(180deg);
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}
.flipped #back{
  transform;               rotateY(0deg);
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}





button{
  height:100px;
  width:100%;
  font-size:20px;
  margin-top:20px;
  cursor:pointer;
}

JavaScript

$('button').click(function(){
	$('.flip-container').toggleClass("flipped");
  $('html, body').animate({
    scrollTop: $('.flip-container').offset().top - 20
  }, 2000);
});