A Pen by Michael Yin.

index.slim

.l
  .front-1.front
  .front-2.front
  .left
  .bottom
  .top-1
  .top-2
  .right-1
  .right-2

qsrfG.markdown

qsrfG

A Pen by Michael Yin on CodePen.

License.

style.sass

.l
  font-size: 20em
  overflow: visible
  margin: 20px auto
  width: 1em
  position: relative
  transform-style: preserve-3d  
  transform-origin: 0 1em
  perspective: 1500px
  transition: all 2s ease
  transform: rotate3d(-2, -4, 2, 20deg) 
  &>*
    background-color: yellow
    position: absolute
    transform-origin: top left
    box-sizing: border-box
    border: dashed 1px black
  &>.front
    background-color: yellow
  &>:not(.front)
    box-shadow: 0 0 .05em orange
  
.front-1
  left: 0
  top: 0
  width: .1em
  height: 1em

.front-2
  top: .9em
  left: .1em
  width: .4em
  height: .1em

.left
  top: 0
  left: 0
  width: .1em
  height: 1em
  transform: rotateY(90deg)
.right-1
  top: 0
  left: .1em
  width: .1em
  height: .9em
  transform: rotateY(90deg)
.right-2
  top: .9em
  left: .5em
  width: .1em
  height: .1em
  transform: rotateY(90deg)
.bottom
  top: 1em
  left: 0
  width: .5em
  height: .1em
  transform: rotateX(-90deg)
.top-1
  top: 0
  left: 0
  width: .1em
  height: .1em
  transform: rotateX(-90deg)
.top-2
  top: .9em
  left: .1em
  width: .4em
  height: .1em
  transform: rotateX(-90deg)