RwNVObY

index.html

<div class="root">
  <div class="card one"></div>
  <div class="card two"></div>
  <div class="card three"></div>
  <div class="card four"></div>
  <div class="card five"></div>
  <div class="card six"></div>
  <div class="card seven"></div>
</div>

rwnvoby.markdown

RwNVObY

A Pen by David Stolarsky on CodePen.

License.

style.css

.root {
  perspective: 800px;
}

.card {
  width: 512px;
  height: 512px;
  background-color: gray;
  background-size: cover;
  background-position: center center;
  
  transform: rotate3d(1, 0, 0, 45deg);
}

.card.one {
  background-image: url(http://www.placekitten.com/g/1024/1024);
}
.card.two {
  background-image: url(http://www.placekitten.com/g/1025/1024);
}
.card.three {
  background-image: url(http://www.placekitten.com/g/1026/1024);
}
.card.four {
  background-image: url(http://www.placekitten.com/g/1027/1024);
}
.card.five {
  background-image: url(http://www.placekitten.com/g/1028/1024);
}
.card.six {
  background-image: url(http://www.placekitten.com/g/1029/1024);
}
.card.seven {
  background-image: url(http://www.placekitten.com/g/1030/1024);
}