HTML
Для иконок подключаем ionicons
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div class="center">
<div class="wrapper">
<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
<div class="container container--facebook">
<div class="box box--left box--front">
<i class="ion ion-social-facebook"></i>
<span class="count">
13 K
</span>
</div>
<span class="follow follow--left">
Like
</span>
</div>
</a>
<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
<div class="container container--twitter">
<div class="box box--middle">
<i class="ion ion-social-twitter"></i>
<span class="count">
10.5 K
</span>
</div>
<span class="follow follow--middle">
Follow
</span>
</div>
</a>
<a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
<div class="container container--instagram">
<div class="box box--right">
<i class="ion ion-social-instagram"></i>
<span class="count">
11 K
</span>
</div>
<span class="follow follow--right">
Follow
</span>
</div>
</a>
</div>
</div>
CSS
a {
text-decoration: none;
display: block;
}
.center {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: 100vh;
}
.wrapper {
max-width: 780px;
margin: 0 auto;
display: -webkit-box;
display: flex;
}
.container {
color: white;
background-color: white;
border-radius: 2px;
box-shadow: 0 35px 80px 7px rgba(0, 0, 0, 0.1);
margin: 0 10px;
min-width: 120px;
min-height: 120px;
-webkit-perspective: 1000px;
perspective: 1000px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container--facebook {
background-color: #37508D;
}
.container--twitter {
background-color: #00A5EA;
}
.container--instagram {
background-color: #195484;
}
.ion {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ion.ion-social-facebook {
color: #37508D;
}
.ion.ion-social-twitter {
color: #00A5EA;
}
.ion.ion-social-instagram {
color: #195484;
}
.box {
-webkit-box-align: end;
align-items: flex-end;
background-color: white;
box-shadow: 0 20px 60px 0px rgba(0, 0, 0, 0.08);
border-radius: 2px;
color: white;
font-size: 2.25rem;
-webkit-box-pack: center;
justify-content: center;
position: relative;
text-align: center;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transform-style: transform-3d;
transform-style: transform-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
height: 120px;
width: 120px;
}
.box>* {
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transform-style: transform-3d;
transform-style: transform-3d;
}
.box--left {
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
}
.box--middle {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.box--right {
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: -webkit-transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.container:hover .box--left,
.active .box--left {
-webkit-transform: translate(-40px, -40px) rotate(-90deg) rotateY(180deg);
transform: translate(-40px, -40px) rotate(-90deg) rotateY(180deg);
}
.container:hover .box--left .ion,
.active .box--left .ion {
-webkit-transform: rotate(270deg) rotateY(180deg) translate(-122%, -4%);
transform: rotate(270deg) rotateY(180deg) translate(-122%, -4%);
}
.container:hover .box--left .count,
.active .box--left .count {
-webkit-transform: rotate(270deg) rotateY(180deg) translate(-200%, 200%);
transform: rotate(270deg) rotateY(180deg) translate(-200%, 200%);
}
.container:hover .box--middle,
.active .box--middle {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
.container:hover .box--right,
.active .box--right {
-webkit-transform: translate(40px, -40px);
transform: translate(40px, -40px);
}
.count {
font-size: 14px;
color: rgba(0, 0, 0, 0.4);
display: block;
font-weight: 400;
text-align: center;
position: absolute;
left: 50%;
top: 70%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.follow {
bottom: 0;
color: white;
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
position: absolute;
}
.follow--left {
right: 0;
-webkit-transform: translate(-14px, -10px);
transform: translate(-14px, -10px);
}
.follow--middle {
left: 50%;
-webkit-transform: translate(-50%, -10px);
transform: translate(-50%, -10px);
}
.follow--right {
left: 0;
-webkit-transform: translate(14px, -10px);
transform: translate(14px, -10px);
}