CSS трансформация с использованием transform

При наведение на какую-либо область, выезжают и поворачиваются блоки.

HTML часть

<div class="section">
  <div class="phone">
  </div>
  <div class="tablet"> 
  </div>
  <div class="desktop">
  </div>
  <h1 class="heading">Адаптивная верстка</h1>
</div>

Пример на github

body{
 font-family: sans-serif;
 margin: 0;
}
.section{
 background-color: #f2395a;
 color: #fff;
 height: 100vh;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
     -ms-flex-align: center;
         align-items: center;
 position: relative;
 perspective: 1000px;
}
.section:hover .phone,
.section:hover .tablet,
.section:hover .desktop{
 transform: translateY(10px) rotateY(-15deg);
}
.heading{
 margin-left: 30%;
}
.phone,
.tablet,
.desktop{
 background-color: #fff;
 -webkit-box-shadow: 13px 13px 32px 0 rgba(242, 57, 90, .3);
         box-shadow: 13px 13px 32px 0 rgba(242, 57, 90, .3);
 position: absolute;
 -webkit-transition: 1s;
 -o-transition: 1s;
 transition: 1s;
 transform: translateY(100%);
}
.phone{
 width: 200px;
 height: 280px;
 left: 5%;
 bottom: 0;
 background: #fff url('../img/mobile.svg') center no-repeat;
 z-index: 3;
 transition-delay: 0.2s;
}
.tablet{
 width: 360px;
 height: 380px;
 bottom: 0; 
 left: 10%;
 background: #fff url('../img/tablet.svg') center no-repeat;
 z-index: 1;
 transition-delay: 0.4s;
}
.desktop{
 width: 680px;
 height: 480px; 
 bottom: 0; 
 left: 15%;
 background: #fff url('../img/desktop.svg') center no-repeat;
 transition-delay: 0.6s;
 
}