<div class="parent perspective">
  <h1>Perspective property on parent</h1>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>
<hr>
<div class="parent transform">
  <h1>Using transform: perspective() on children</h1>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>
* {
  box-sizing: border-box;
}

body {
  font-size: 20px;
}

.parent {
  width: 50%;
  display: inline-block;
  padding: .5em;
}

.parent.perspective {
  perspective: 50em;
}

.child {
  margin: .5em;
  width: 3em;
  height: 3em;
  background: yellow;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.5);
}

.parent.perspective .child {
  transform: rotateX(50deg);
  background: green;
}

.parent.transform .child {
  transform: perspective(50em) rotateX(50deg);
  background: #f1f;
}

h1 {
  font-size: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.