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;
}