Book flip 3D animation effect

This is a custom 3D animated effects for Menu/catalogue/Book/brochure which can be kept on the restaurant websites and as a real menu card for displaying the varieties of food available at their place. This menu card can also be used in other product based websites were the varieties can be displayed as a brochure.

by velo_ninja

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Orbitron|Raleway|Bitter|Great+Vibes|Roboto+Condensed"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="body-content">
    <div class="main-container">
      <div id="#main-wraper" class="main-wraper">

        <!-- Menu card -->
        <div class="menu-card">
          <!-- Cover Page -->
          <div class="cover-page">
            <!-- Front Page -->
            <div class="front-page">
              <div class="front-content">
                <div class="logo"><img src="images/logo3.jpg" alt="logo"></div>
                <div class="food-menu-content">
                  <div class="food-img">
                    <img src="images/addweb3.jpg">
                    <img src="images/addweb4.jpg">
                    <img src="images/addweb5.jpg">
                  </div>
                  <div class="food-menu-address">
                    <h2>SERVICES</h2>
                    <p><i class="fa fa-phone" aria-hidden="true"></i>+91-903-317-7471</p>
                    <p><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="javascript:void(0);">www.addwebsolution.com</a></p>
                    <p><i class="fa fa-map-marker" aria-hidden="true"></i>405, Silicon Tower, Above Freezland Restaurant, Law Garden, Off C.G. road,Ahmedabad,Gujarat.</p>
                  </div>
                  <div class="view-menu">
                    <a href="javascript:void(0);" class="open-btn">Look Inside &#8594</a>
                  </div>
                </div>
              </div>
            </div>

            <!-- Back Page -->
            <div class="front-page back-page">
              <div class="middle-wraper">
                <h2>DRUPAL...

CSS

/**
 * Base css of site
 */

@font-face {
  font-family: "OpenSans Regular";
  src: url("../fonts/OpenSans/OpenSans-Regular.woff");
}

* {
  line-height: normal;
  vertical-align: top;
}

body {
  font-family: "OpenSans Extrabold";
}

a {
  text-decoration: none;
}

a:hover, a:focus {
  outline: none;
}


img {
  height: auto;
  max-width: 100%;
}


video {
  height: auto;
  width: 100%;
}


/**
 * 3D Menu card SCSS.
*/

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


.body-content {
  display: inline-block;
  min-height: 100vh;
  width: 100%;
  background-image: url("../images/bg-img.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.main-container {
  position: relative;
  width: 95%;
  margin: 90px auto;
}

.main-container .main-wraper {
  position: relative;
  min-height: 580px;
  width: 33%;
  max-width: 400px;
  margin: 0 auto 50px;
  perspective: 1600px;
}
@media (max-width: 1200px) {
  .main-container .main-wraper {
    min-height: 630px;
  }
}

.main-container .main-wraper .menu-card {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  transition: all 0.6s ease-in-out, height 0s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.main-container .main-wraper .menu-card .cover-page {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transform-origin: .5% 50%;
  transition-delay: .2s;
  transition: all 0.6s ease-in-out, height 0s;
  z-index: 100;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style:...

JavaScript

jQuery(document).ready(function() {

  // Open btn
  jQuery('.open-btn').click(function() {
    jQuery('.menu-card').addClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-in');
    jQuery('.cover-page').removeClass('cover-out');
    jQuery('.right-page').addClass('right-in');
    jQuery('.right-page').removeClass('rigt-out');
    jQuery('.back-page, .right-front-page').addClass('flip-back-page');
  });

  // Close btn
  jQuery('.close-btn').click(function() {
    jQuery('.menu-card').removeClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-out');
    jQuery('.cover-page').removeClass('cover-in');
    jQuery('.right-page').addClass('rigt-out');
    jQuery('.right-page').removeClass('right-in');
    jQuery('.back-page, .right-front-page').removeClass('flip-back-page');
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

  // After click on inner link effect
  // Open btn
  jQuery('.popup').click(function() {
    jQuery('.after-click-content').addClass('after-click');
    jQuery('.menu-card').addClass('bg-effect');
  });
  // Close btn
  jQuery('.after-close').click(function() {
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

});