<div class="scene">
  <div class="panel panel--translate-neg-z">translateZ(-200px)</div>
</div>

<div class="scene">
  <div class="panel panel--translate-pos-z">translateZ(200px)</div>
</div>

<div class="scene">
  <div class="panel panel--rotate-x">rotateX(45deg)</div>
</div>

<div class="scene">
  <div class="panel panel--rotate-y">rotateY(45deg)</div>
</div>

<div class="scene">
  <div class="panel panel--rotate-z">rotateZ(45deg)</div>
</div>

body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 60px 60px 60px 0;
  perspective: 600px;
}

.panel {
  width: 100%;
  height: 100%;
  background: hsla(0, 100%, 50%, 0.7);
  line-height: 200px;
  color: white;
  font-size: 18px;
  text-align: center;
}

.panel--translate-neg-z {
  transform: translateZ(-200px);
}

.panel--translate-pos-z {
  transform: translateZ(200px);
}

.panel--rotate-x {
  transform: rotateX(45deg);
}

.panel--rotate-y {
  transform: rotateY(45deg);
}

.panel--rotate-z {
  transform: rotateZ(45deg);
}