CodePen Embed - Product card flip

Rebound of <a href="https://codepen.io/virgilpana/pen/RNYQwB">this pen</a>
<section class="container">
  <div class="card flipped">
    <div class="side recto">
      <div class="infos">
        <h3>Nike air max triax</h3>
        <small>Size 43</small>
        <div class="point">
          <div class="red"></div>
          <div class="blue"></div>
          <div class="orange"></div>
        </div>
        <div class="overlay"></div>
      </div>
      <div class="showmore">show more</div>
    </div>
    <div class="side verso">
      <ul class="gallery">
        <li><img src="http://boudaoud.samir.free.fr/codepen/nike/3.jpg"/></li>
        <li><img src="http://boudaoud.samir.free.fr/codepen/nike/2.jpg"/></li>
        <li><img src="http://boudaoud.samir.free.fr/codepen/nike/1.jpg"/></li>
      </ul>
      <div class="navigation">
        <a id="prev" href="#"><i class="fa fa-angle-left"></i></a>
        <a id="next" href="#"><i class="fa fa-angle-right"></i></a>
      </div>
      <div class="close">
        <span class="x"></span>
      </div>
    </div>
  </div>
</section>

/* apply a natural box layout model to all elements, but allowing components to change */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;margin: 0;padding: 0;}
body{
  background: url('http://boudaoud.samir.free.fr/codepen/nike/bg123.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
/* Main container with perspective */
.container{
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 300px;
  height: 420px;
  position: absolute;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.card, .side{
  position: absolute;
  top:0;bottom:0;left:0;right:0;
}
.card{
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: .6s cubic-bezier(.87,-.41,.19,1.44);
          transition: .6s cubic-bezier(.87,-.41,.19,1.44);
  width: 100%;
  height: 100%;
  font-size: 0;
}
.side{
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* dont show backface */
  text-align: center;
}
.flipped{
  -webkit-transform: rotateY(0.5turn);
          transform: rotateY(0.5turn);
}
.recto, .verso{
  box-shadow: 0 0 50px #e1e1e1;
  -webkit-transition: box-shadow .3s;
          transition: box-shadow .3s;
}
.card:hover .recto, .card:hover .verso{
  box-shadow: 0 0 50px #c9c9c9;
}
.recto{
  -webkit-transform: rotateY(0.5turn);
          transform: rotateY(0.5turn);
  background: url('http://boudaoud.samir.free.fr/codepen/nike/front.jpg') no-repeat center center;

}
.verso{
  background-color: #defabd;
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 420px;
}

/* Infos recto */
.infos{
  position: fixed;
  bottom: 0;
  height: 20%;
}
.infos h3{
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-family: Oswald;
  font-weight: 400;
  position: fixed;
  opacity: 0;
}
.infos small{
  font-size: 12px;
  position: fixed;
  bottom: 40px;
  left: 15px;
  color: #ccc;
  font-family: 'Open sans';
}
.infos h3, .infos small{
  -webkit-animation: to-right .5s .4s;
          animation: to-right .5s .4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.point{
  right: 20px;
  bottom: 35px;
  position: fixed;
  margin-top: 25px;
}
.point div{
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  position: fixed;
  border-radius: 35%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.blue{background-color: skyblue; -webkit-animation: to-left-1 .4s .3s; animation: to-left-1 .4s .3s;}
.red{background-color: #d62a2a; -webkit-animation: to-left-2 .4s .3s; animation: to-left-2 .4s .3s;}
.orange{background-color: orange; -webkit-animation: to-left-3 .4s .3s; animation: to-left-3 .4s .3s;}

@-webkit-keyframes to-left-1{from{opacity:0;right:0;}to{opacity:1;right:20px;}}

@keyframes to-left-1{from{opacity:0;right:0;}to{opacity:1;right:20px;}}
@-webkit-keyframes to-left-2{from{opacity:0;right:0;}to{opacity:1;right:40px;}}
@keyframes to-left-2{from{opacity:0;right:0;}to{opacity:1;right:40px;}}
@-webkit-keyframes to-left-3{from{opacity:0;right:0;}to{opacity:1;right:60px;}}
@keyframes to-left-3{from{opacity:0;right:0;}to{opacity:1;right:60px;}}

@-webkit-keyframes to-right{from{opacity:0;left:0;}to{opacity:1;left:15px;}}

@keyframes to-right{from{opacity:0;left:0;}to{opacity:1;left:15px;}}

/* Overlay */
.overlay{
  position: fixed;
  background-color: #fff;
  left:0;right:0;top:0;bottom:0;
  opacity:0;
  display: hidden;
  -webkit-transition: .3s;
          transition: .3s;
}
.showmore{
  position: fixed;
  width: 120px;
  height: 33px;
  border: 1px solid black;
  font-size: 16px;
  text-transform: uppercase;
  font-family: Oswald;
  padding-top: 3px;
  top: 50%; left:50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  display: hidden;
  cursor: pointer;
  -webkit-transition: 0.4s;
          transition: 0.4s;
}
.recto:hover .overlay,
.recto:hover .showmore{
  opacity: .7;
  display: visible;
}
.showmore:hover{
  color: #d62a2a;
}
/* Gallery */
.gallery{
  position: fixed;
  z-index: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  width: 900px;
  -webkit-transition: .5s;
          transition: .5s;
  left: 0;
}
.gallery img{
  max-width: 300px;
}
.gallery li{
  list-style-type: none;
  display: inline-block;
}
#prev, #next{
  z-index: 2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: fixed;
  font-size: 25px;
  top: 85%;
  font-weight: 300;
  color: #d1d1d1;
  -webkit-transition: .3s;
          transition: .3s;
}
#prev{left: 10px;}
#next{right: 10px;}

#prev:hover,
#next:hover{
  color: #010101;
}

.close{
  z-index: 2;
  position: fixed;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  right: 15px;
  top: 25px;
  width: 25px; height: 25px;
  cursor: pointer;
}
.x::before, .x::after{
  display: hidden;
  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  background-color: #d2d2d2;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: .5s;
          transition: .5s;
  left: 0; top: 0;
}
.visible .x::before{
  -webkit-animation: x1 .5s .6s;
          animation: x1 .5s .6s;
}
.visible .x::after{
  -webkit-animation: x2 .5s .6s;
          animation: x2 .5s .6s;
}
.visible .x::before,
.visible .x::after{
  -webkit-animation-timing-function: cubic-bezier(3.87,.41,.19,1.44);
          animation-timing-function: cubic-bezier(3.87,.41,.19,1.44);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.close:hover .x::before,
.close:hover .x::after{
  background-color: #010101;
}

@-webkit-keyframes x1{
  0%{width: 0;display:visible;opacity:1;}
  50%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
}

@keyframes x1{
  0%{width: 0;display:visible;opacity:1;}
  50%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
}
@-webkit-keyframes x2{
  0%{width: 0;}
  50%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg);}
}
@keyframes x2{
  0%{width: 0;}
  50%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{display:visible;opacity:1;right:0;left:0;-webkit-transform:rotate(135deg);transform:rotate(135deg);}
}

$('.close , .showmore').on('click', function(){
  $('.card').toggleClass('flipped');
  $('.close').toggleClass('visible');
});

//Gallery
var galleryWidth = parseInt($('ul').css('width'), 10);
var currentLeft = parseInt($('ul').css('left'), 10);

// NEXT button
$('#next').on('click', function(e){
  e.preventDefault();
  if(Math.abs(currentLeft) < (galleryWidth - 300)){
    $('.gallery').css('left', (currentLeft - 300) + 'px');
    currentLeft -= 300;
  }else{
    $('.gallery').css('left', 0 + 'px');
    currentLeft = 0;
  }
});

// PREV button
$('#prev').on('click', function(e){
  e.preventDefault();
  if(Math.abs(currentLeft) >= (galleryWidth - 300)){
    $('.gallery').css('left', (currentLeft + 300) + 'px');
    currentLeft += 300;
  }else{
    $('.gallery').css('left', 0 + 'px');
    currentLeft = -900;
  }
});

This Pen is owned by Samir Boudaoud on CodePen.

See more by @SamirB on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js