XYZ

index.html

<div class="xyz-container">
  <div class="plane x"></div>
  <div class="plane y"></div>
  <div class="plane z"></div>
</div>

style.css

.xyz-container {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  -webkit-perspective-origin: 150px -50px;
  -webkit-perspective: 200px;
}
.plane {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  -webkit-transition: 1s;
}
.plane:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  top: 0;
  left: 50px;
  background-color: rgba(255,255,255,0.5);
}
.x {
  background-color: rgba(0,0,255,0.5);
}
.xyz-container:hover .x {
  -webkit-transform: rotateX(90deg);
}
.y {
  background-color: rgba(255,0,0,0.5);
}
.xyz-container:hover .y {
  -webkit-transform: rotateY(90deg);
}
.z {
  background-color: rgba(0,255,0,0.5);
}
.xyz-container:hover .z {
  -webkit-transform: rotateZ(90deg);
}

XYZ.markdown

XYZ

Learning 3D transforms

A Pen by Rulo Kobashikawa on CodePen.

License.