Cacher is the code snippet organizer for pro developers

<!-- CSS 3D Transform
      simple ways to move, rotate, scale, and skew elements in three-dimensional (z axis for 3d)
      a 3d transform -translate on the z axis and rotate on the x and y axis


      translate 3d - translatez - rotate3d
      The benefit of using 3d function are that trigger hardware acceleration in the browser

      transform - transitions
      not automatically cpu acceleterate
-->

<div class="wrap">
    <div class="side-a"> </div>
    <div class="side-b"> </div>
  </div>


<style>

/* page css */

.wrap {
  position: relative;
  margin: 0 auto;
  width: 250px;
  height: 350px;
  cursor: pointer;
}
.wrap div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-position: 50% 50%;
  background-size: 150px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
  color: #FFF;
  text-align: center;
  text-shadow: 0 1px rgba(0,0,0,.3);
  font: bold 3em sans-serif;
  line-height: 350px;
}
.side-a {
  background: #498FBC url('img/mike.png');
}
.side-b {
  background: #33363B url('img/logo.png');
}

/* transform css */
/* negative -45deg left - positive 45deg right */


/* affect the descent element example wrap - it doesn't affect side-a side-b */
body {
  -webkit-perspective: 800px; /* create a 3d space */
  /* -webkit-perspective: 300px;  body ready to move elements in 3d space */
}

 /* with origin */
   body { 
  -webkit-perspective: 800px; 
  -webkit-perspective-origin: 100% 100%; /* is the perspective can be move up down < 
   (from where you see it see it from top to above) default is on the center 50% 50% (X Y position on the center) ( deepest less value 200px compared to 1000px far)
   100% 100% bottom right coming to us 3d
   */
   }


.wrap {
  transition: -webkit-transform 1s ease-in;
  -webkit-transform-style: preserve-3d; /* pass 3d to nested elements inside wrap */
}

.wrap div {
  position: absolute;
  -webkit-backface-visibility: hidden;
}

.side-a {
  z-index: 100;
}

.side-b {
  -webkit-transform: rotateY(-180deg);
}

.wrap:hover {
  -webkit-transform: rotateY(-1turn); /* (180deg) rotate half */
}

/* z axis right - left */
.wrap:hover {
  -webkit-transform: rotateZ(45deg); 
  
}

.wrap:hover {
  -webkit-transform: rotate3d(1, 1, 0, 65deg); 
  /* 3d rotate accept 3 values 1, 1, 0 - X Y Z - 
     first three values rotation -
     4 value angle that make rotation happen -
     provides no rotation on the z axis */
}


/* positive 200px closer to viewer  translate z function*/
.wrap:hover {
  -webkit-transform: translateZ(200px); 
  
}

/*   translate 3d function*/
.wrap:hover {
  -webkit-transform: translate3d(100px, 50px, 150px); /* X Y Z */
  
}

/*   translate 3d function*/
.wrap:hover {
  -webkit-transform: scaleZ(2) translateZ(100px); /* translate 200px 2*100 =
   translateZ(200px) 
   scaleZ function is multiplied by the element's current position on the Z axis*/
  
}


</style>