#persp{margin-top:0}
.tpl:before,.tpl p:before,.tpl p:after{
  display:none
}
.tpl p span{
  display:inline-block
}
.tpl p span{
  perspective:300px;
  perspective-origin:100% 80%;
  margin-left:.03em;
  padding-top:.3em
}
.tpl p span:before,.tpl p span:after{
  width:1em;
  box-shadow:0 0 1px,0 0 2px
}
.tpl p span:before{
  transform:rotatey(-12deg);
  transform-origin:top left;
  background:aqua;
  color:gray
}
.tpl p span:after{
  transform:rotatey(-30deg);
  transform-origin:top left;
  color:red;
  background:rgba(0,0,0,.2);
  transition:transform .5s
}
.template:hover .tpl p span:after{
  transform:rotatey(-12deg)
}
.char1:before,.char1:after{content:"D"}
.char2:before,.char2:after{content:"O"}
.char3:before,.char3:after{content:"O"}
.char4:before,.char4:after{content:"R"}
.char5:before,.char5:after{content:"S"}
#dropbox:after{content:"hover\a L E T T E R I N G"}