<div class="con">
  <div class="title">transform:</div>
  <ul class="options">
          <li><label for="t1">none</label></li>
          <li><label for="t2">perspective(1200px)</label></li>
           <li><label for="t3">perspective(1200px) rotateY(180deg)</label></li>
         <li><label for="t4">perspective(1200px) rotateX(90deg)</label></li>
    <li><label for="t5">perspective(1200px) rotateX(-90deg)</label></li>
      </ul>
      <input class="i i1" id="t1" type="radio" name="t" value="1" checked>
      <input class="i i2" id="t2" type="radio" name="t" value="2">
      <input class="i i3" id="t3" type="radio" name="t" value="3">
      <input class="i i4" id="t4" type="radio" name="t" value="4">
      <input class="i i5" id="t5" type="radio" name="t" value="5">
  <div class="scene">
    <div class="cube">
      <div class="side">
        <span class="none">SIDE</span>
        <span class="front">FRONT</span>
        <span class="back">BACK</span>
        <span class="top">TOP</span>
        <span class="bottom">BOTTOM</span>
      </div>
    </div>
  </div>
</div>
body {
  margin: 0;
}

.con {
  overflow: hidden;
  min-height: 448px;
}

.title {
  padding: 25px;
  font: 40px/50px 'Trebuchet MS', sans-serif;
}

.options {
  float: left;
  position: relative;
  width: 225px;
  margin: 0;
  padding-left: 45px;
}

.options li {
  max-height: 60px;
  margin: 0 0 20px 0;
  font: 20px/30px 'Trebuchet MS', sans-serif;
  list-style: none;
}

.options label {
  cursor: pointer;
}

.scene {
  position: relative;
  margin-left: 270px;
  width: 300px;
  height: 300px;
}

.cube {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 300px;
  height: 300px;
  transform: perspective(1200px) translateZ(-150px);
}

.cube::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px dotted #000;
  opacity: .25;
  box-sizing: border-box;
}

.side {
  position: absolute;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-color: #20aa97;
  padding: 120px 0;
  font: 50px/1 'Trebuchet MS', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  transform-origin: 50% 50% -150px;
  transition: transform 1.5s ease-in;
}

.side span {
  display: none;
}

.i {
  position: absolute;
  left: 20px;
  margin-top: 10px;
}

.i1 {
  top: 100px;
}
.i2 {
  top: 150px;
}
.i3 {
  top: 200px;
}
.i4 {
  top: 280px;
}
.i5 {
  top: 360px;
}

.i2:checked ~ .scene .side {
  transform: perspective(1200px);
}
.i3:checked ~ .scene .side {
  transform: perspective(1200px) rotateY(180deg);
}
.i4:checked ~ .scene .side {
  transform: perspective(1200px) rotateX(90deg);
}
.i5:checked ~ .scene .side {
  transform: perspective(1200px) rotateX(-90deg);
}

.i1:checked ~ .scene .none {
  display: inline;
}
.i2:checked ~ .scene .front {
  display: inline;
}
.i3:checked ~ .scene .back {
  display: inline;
}
.i4:checked ~ .scene .top {
  display: inline;
}
.i5:checked ~ .scene .bottom {
  display: inline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.