<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;
}