<div class="con">
  <div class="title">transform-origin:</div>
  <ul class="options">
          <li><label for="to1">50% 50%</label></li>
          <li><label for="to2">50% 0</label></li>
          <li><label for="to3">0 0</label></li>
          <li><label for="to4">left bottom</label></li>
          <li><label for="to5">50% 50% -25px</label></li>
          <li><label for="bvh">+ backface-visibility:hidden</label></li>
      </ul>
      <input class="i i1" id="to1" type="radio" name="to" value="1">
      <input class="i i2" id="to2" type="radio" name="to" value="2">
      <input class="i i3" id="to3" type="radio" name="to" value="3">
      <input class="i i4" id="to4" type="radio" name="to" value="4">
      <input class="i i5" id="to5" type="radio" name="to" value="5">
      <input class="i i6" id="bvh" type="checkbox" name="bvh" value="1">
  <div class="scene">
    <div class="cube">
      <div class="side">SIDE</div>
    </div>
    <div class="dot"></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: 207px;
  padding-left: 45px;
}

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

.options li:last-child {
  font-size: 16px;
  font-style: italic;
}

.options label {
  cursor: pointer;
}

.scene {
  position: relative;
  margin-left: 252px;
  width: 300px;
  height: 300px;
  perspective: 1200px;
}

.cube {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
}

.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: 125px 0;
  font: 50px/1 'Trebuchet MS', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.dot {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px;
  border-radius: 10px;
  background: #d00;
}

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

.i1 {
  top: 100px;
}
.i2 {
  top: 150px;
}
.i3 {
  top: 200px;
}
.i4 {
  top: 250px;
}
.i5 {
  top: 300px;
}
.i6 {
  top: 350px;
}

.i2:checked ~ .scene .side {
  transform-origin: 50% 0;
}
.i3:checked ~ .scene .side {
  transform-origin: 0 0;
}
.i4:checked ~ .scene .side {
  transform-origin: left bottom;
}
.i5:checked ~ .scene  .side {
  transform-origin: 50% 50% -150px;
  animation: rotate3d 5s infinite linear;
}
.i6:checked ~ .scene .side {
  backface-visibility: hidden;
}

.i1:checked ~ .scene .side,
.i2:checked ~ .scene .side,
.i3:checked ~ .scene .side,
.i4:checked ~ .scene .side {
  animation: rotate2d 5s infinite linear;
}

.i1:checked ~ .scene .dot {
  display: block;
}
.i2:checked ~ .scene .dot {
  display: block;
  top: 0;
}
.i3:checked ~ .scene .dot {
  display: block;
  top: 0;
  left: 0;
}
.i4:checked ~ .scene .dot {
  display: block;
  top: 100%;
  left: 0;
}
.i5:checked ~ .scene .dot {
  display: block;
  opacity: 0;
  animation: dot 5s infinite linear;
}

@keyframes rotate2d {
  100% { transform: rotate(360deg); }
}
@keyframes rotate3d {
	100% { transform: rotateX(360deg); }
}
@keyframes dot {
	0% { opacity: 0; }
	14.3% { opacity: 0; }
	14.4% { opacity: 1; }
	85.6% { opacity: 1; }
	85.7% { opacity: 0; }
	100% { opacity: 0; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.