<div class="container">
  <svg class="layer-1">
    <path class="layout" d="M50,50 L650,50 L650,500 L50,500 z" />
  </svg>
  <svg class=" layer-2">
    <path class="h1"
          d="M120,100 L580,100 L580,150 L120,150 z
             M120,170 L580,170 L580,190 L120,190 z
             M120,210 L340,210 L340,400 L120,400 z
             M420,210 L580,210 L580,250 L420,250 z
             M360,270 L580,270 L580,400 L360,400 z
             M120,420 L580,420 L580,450 L120,450 z"/>
    <circle class="ava" cx="380" cy="230" r="20"/>
  </svg>
  <svg class="layer-3">
    <path class="text"
          d="M390,300 L550,300 L550,302 L390,302 z
             M390,315 L550,315 L550,317 L390,317 z
             M390,332 L550,332 L550,334 L390,334 z
             M390,349 L550,349 L550,351 L390,351 z
             M390,366 L550,366 L550,368 L390,368 z
             M250,435 L450,435 L450,437 L250,437 z"/>
    <path class="image"
          d="M150,250 L310,250 L310,360 L150,360 z
             M170,360 L210,315 L250,360 z
             " />
    <path class="image"
          d="M220,360 L270,300 L310,340 L310,360 z"/>
    <circle class="image" cx="185" cy="275" r="10" />
  </svg>
</div>

body {
  background-color: white;
  position: relative;
}
svg {
  width: 700px;
  height: 600px;
  top: 25vh;
  left: 10vw;
}
path, circle {
  stroke: #e12345;
  stroke-width: 2px;
  fill: #ec5252;
}
.h1, .ava {
  stroke: #ec5252;
  fill: white;
  opacity: .8;
}
.text, .image {
  fill: white;
  stroke: #ec5252;
  stroke-width: 2px;
}
.container {
  transform-style: preserve-3d;
  transition: transform 1800ms ease 0s;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  width: 50vw;
}
.layer-1, .layer-2, .layer-3 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}
.layer-1 {
  opacity: 0.5;
}
.container svg {
  transform-style: preserve-3d;
  transition: transform 1800ms ease 0s; 
}
.container:hover {
  transform: rotateX(50deg) rotateY(0deg) rotateZ(-15deg) translateY(60px);
}
.container:hover .layer-2 {
  transform: translateX(0px) translateY(60px) translateZ(120px);
}
.container:hover .layer-3 {
  transform: translateX(0px) translateY(60px) translateZ(180px);
}

/* just for grid for preview */
.grid {
    position: absolute;
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
    top: 0;
    z-index: -1;
}
.grid div {
  z-index: -1;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    float: left;
}

//draw grid
function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),
        ratioH = Math.floor($(window).height()/size);
    
    var parent = $('<div />', {
        class: 'grid', 
        width: ratioW  * size, 
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1, 
                height: size - 1
            }).appendTo(parent);
        }
    }
}

createGrid(50); //grid width = 50px