Dúvida no Ex. 6 da Aula 4 - Transformações

Pessoal seguindo as instruções, o resultado final ficou uma zueira só: >> Print Screen

Onde estou errando e Como contornar isto?

CSS:

.titulo-principal {
    position: relative;
}
.definitions-3d {
  position: absolute;
  perspective: 6px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.definitions-3d li {
  font-size: 400%;
}
.palavras-home {
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.2em;
    font-weight: bold;
    color: #D5447E; 
    position: absolute;

}
.eficiencia {
    top: 35%;
    left: 15%;
    transform: translate(-50%, -50%)
               skew(-20deg)
               scale(2) 
               rotate(-20deg)
               translateZ(.005px);
}
.boas-praticas {
    top: 12.5em;
    left: 19em;
    transform: translate(-50%, -50%)
               rotate(-10deg)
               scale(1.3)
               translateZ(2px);
}
.codigo-limpo {
    bottom: 5em;
    right: 13em;
    transform: translate(-50%, -50%) 
               scale(2) 
               rotate(30deg)
               translateZ(1px);
}
.css3 {
    bottom: 7em;
    left: 19em;
    transform:   translate(-50%, -50%) scale(1.4) rotate(19deg) translateZ(.5px);

}
.html5 {
    top: 25%;
    left: 35%; 
    transform:   translate(-50%, -50%) skew(25deg) scale(1.8) rotate(25deg) translateZ(.5px);
}
.javascript {
    top: 3.5em;
    right: 17em;
    transform: translate(-50%, -50%)
               scale(1.4) 
               rotate(-10deg)
               translateZ(.9px);
}
.acessibilidade {
    top: 2.8em;
    left: 9em;
    transform:  translate(-50%, -50%) scale(1.4) rotate(11deg) translateZ(1px);
}
.responsividade {
    bottom: 5em;
    left: 13em; 
    transform: translate(-50%, -50%) scale(1.2) rotate(7deg) translateZ(.3px);
}
.otimizacoes {
    bottom: 1.4em;
    right: 16em;
    transform: translate(-50%, -50%)
               scale(1.4)
               rotate(13deg)
               translateZ(1.2px);
}
.agilidade {
    top: 8.3em;
    right: 9em;
    transform:  translate(-50%, -50%) scale(1.3) rotate(-7deg) translateZ(1.5px);
}
.design {
    top: 4em;
    right: 10em;
    transform: translate(-50%, -50%)
               scale(1.8)
               rotate(-30deg)
               translateZ(.7px);
}
.mobile-first {
    bottom: 1em;
    right: 2em;
    transform: translate(-50%, -50%)
               skew(-15deg) 
               scale(1.5)
               rotate(7deg)
               translateZ(.2px);
}
.ux-design {
    bottom: 4em;
    left: 4em;
    transform: 
               translate(-50%, -50%)
               scale(1.5)
               rotate(40deg)
               translateZ(.1px);
}

HTML:

<ul class="definitions-3d">
            <li class="palavras-home eficiencia">Eficiência</li>
            <li class="palavras-home boas-praticas">Boas Práticas</li>
            <li class="palavras-home codigo-limpo">Código Limpo</li>
            <li class="palavras-home css3">Css3</li>
            <li class="palavras-home html5">Html5</li>
            <li class="palavras-home javascript">JavaScript</li>
            <li class="palavras-home acessibilidade">Acessibilidade</li>
            <li class="palavras-home responsividade">Responsividade</li>
            <li class="palavras-home otimizacoes">Otimizações</li>
            <li class="palavras-home agilidade">Agilidade</li>
            <li class="palavras-home design">Design</li>  
            <li class="palavras-home mobile-first">Mobile First</li> 
            <li class="palavras-home ux-design">Ux Design</li>         
  </ul>