CSS 3D Layers Effect

by Génesis García Morilla

HTML

<div class="layers">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="layers">
  <div>I</div>
  <div>love</div>
  <div>you</div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body, .layers div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layers {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, .1);
  transform: rotate(-30deg) skew(25deg) scale(.5);
  transition: 0.5s;
  border-radius: 20px;
  cursor: pointer;
}

.layers div {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  text-align: center;
  vertical-align: center;
  background-color: inherit;
  font-family: 'Roboto';
  color: aliceblue;
  border-radius: 20px;
}

.layers:nth-child(odd) div {
  background-color: darksalmon;
  font-size: 100px;
}

.layers:nth-child(even) div {
  background-color: cadetblue;
  font-size: 50px;
}

.layers:hover div:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: .8;
}

.layers:hover div:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: .6;
}

.layers:hover div:nth-child(1) {
  transform: translate(40px, -40px);
  opacity: .4;
}