#persp{transform:rotate(-34deg);transform-origin:50% 100%}
.template:hover #persp{
  animation:1.5s linear infinite alternate pend
}
.tpl{
  font-family:arabia,bn,hi,hy,ja,ka,km,ko,ml,my,cursive;
  filter:url(#lightB2)drop-shadow(0 5px 1px rgba(0,0,0,.3))
}
.tpl:before,.tpl p:before,.tpl p:after{display:none}
.tpl p span{display:inline-block;height:5em;transform-origin:50% 100%
;border:solid 1px transparent
}
.tpl p span:nth-child(n+2){position:absolute;left:0}
.tpl p span:before,.tpl p span:after{width:1em}
.tpl p span:after{color:green}
.tpl p span:before{filter:blur(.2px)}

.char1:before,.char1:after{content:"A"}
.char2:before,.char2:after{content:"R"}
.char3:before,.char3:after{content:"C"}
.char4:before,.char4:after{content:""}
.char5:before,.char5:after{content:"T"}
.char6:before,.char6:after{content:"E"}
.char7:before,.char7:after{content:"X"}
.char8:before,.char8:after{content:"T"}

.char2{transform:rotate(10deg)}
.char3{transform:rotate(20deg)}
.char4{transform:rotate(30deg)}
.char5{transform:rotate(40deg)}
.char6{transform:rotate(50deg)}
.char7{transform:rotate(60deg)}
.char8{transform:rotate(70deg)}
.char9{transform:rotate(80deg)}
.char10{transform:rotate(90deg)}
.char11{transform:rotate(100deg)}

@keyframes pend{
  0%{transform:rotate(-54deg)}
  100%{transform:rotate(-14deg)}
}
#dropbox:after{content:"L E T T E R I N G\a hover"}