<h1>The perspective Property</h1>

<div class="container">perspective 0
  <div class="item">item0</div>
</div>

<div class="container perspective300">perspective 300
  <div class="item">item 300</div>
</div>

<div class="container perspective100">perspective 100
  <div class="item">item 100</div>
</div>

<div class="container perspective50">perspective 50
  <div class="item">item 50</div>
</div>
.container {
  position: relative;
  height: 150px;
  width: 150px;
  margin: 60px;
  border: 1px solid blue;
}

.perspective300 {
  perspective: 300px;
}

.perspective100 {
  perspective: 100px;
  perspective-origin: 50% 50%;
}

.perspective50 {
  perspective: 50px;
}

.item {
  position: absolute;
  padding: 50px;
  border: 1px solid black;
  background: rgba(100,100,100,0.5); 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.