<div class="scd-iso">
  <div class="scd-iso__stage">
    <div class="scd-iso__layer scd-iso__layer--l4"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">CDN</span></div>
    <div class="scd-iso__layer scd-iso__layer--l3"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">APP</span></div>
    <div class="scd-iso__layer scd-iso__layer--l2"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">API</span></div>
    <div class="scd-iso__layer scd-iso__layer--l1"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">DATA</span></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600&display=swap');

.scd-iso, .scd-iso *, .scd-iso *::before, .scd-iso *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-iso {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%,#1b2735,#090a0f);
  font-family: 'Chakra Petch', sans-serif;
}
.scd-iso__stage {
  position: relative;
  width: 300px; height: 380px;
  transform-style: preserve-3d;
}
.scd-iso__layer {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px;
  margin: -85px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,.9,.3,1);
}
.scd-iso__face { position: absolute; width: 170px; height: 170px; }
.scd-iso__face--top { transform: rotateX(60deg) rotateZ(-45deg); }
.scd-iso__layer--l1 .scd-iso__face--top { background: linear-gradient(135deg,#36d1dc,#5b86e5); }
.scd-iso__layer--l2 .scd-iso__face--top { background: linear-gradient(135deg,#f7971e,#ffd200); }
.scd-iso__layer--l3 .scd-iso__face--top { background: linear-gradient(135deg,#fc466b,#3f5efb); }
.scd-iso__layer--l4 .scd-iso__face--top { background: linear-gradient(135deg,#11998e,#38ef7d); }
.scd-iso__label {
  position: absolute;
  color: #dfe9f5;
  font-size: .85rem; letter-spacing: .1em;
  transform: rotateX(60deg) rotateZ(-45deg);
  top: 60px; left: 60px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.scd-iso__layer--l1 { transform: translateZ(0); z-index: 4; }
.scd-iso__layer--l2 { transform: translateZ(40px); z-index: 3; }
.scd-iso__layer--l3 { transform: translateZ(80px); z-index: 2; }
.scd-iso__layer--l4 { transform: translateZ(120px); z-index: 1; }
.scd-iso__stage:hover .scd-iso__layer--l2 { transform: translateZ(40px) translate(40px,-40px); }
.scd-iso__stage:hover .scd-iso__layer--l3 { transform: translateZ(80px) translate(80px,-80px); }
.scd-iso__stage:hover .scd-iso__layer--l4 { transform: translateZ(120px) translate(120px,-120px); }

@media (prefers-reduced-motion: reduce) {
  .scd-iso__layer { transition: none !important; }
}