3D transform w perspective

nice way to show horizontal layers or levels

by jorgeluis

HTML

<div id="container">

  <div class="level level1">
    <div class="floor"></div>
  </div>

  <div class="level level2">
    <div class="floor"></div>
  </div>

  <div class="level level3">
    <div class="floor"></div>
  </div>

</div>

CSS

#container {
  position: relative;
  padding: 50px;
}
.level {
  position: absolute;
  width: 200px;
  height: 200px;
  perspective: 400px;
}
.level2 {
  perspective: 500px;
  margin-top: -40px;
}
.level3 {
  perspective: 600px;
  margin-top: -90px;
}
.floor {
  height: 100%;
  width: 100%;
  background-color: rgba(220,190,10,0.5);
}
.level1 .floor {
  transform: rotateX( 60deg ) rotateZ(-40deg);
}
.level2 .floor {
  transform: rotateX( 65deg ) rotateZ(-40deg);
  background-color: rgba(240,40,120,0.4);
}
.level3 .floor {
  transform: rotateX( 72deg ) rotateZ(-40deg);
  background-color: rgba(40,120,240,0.4);
}