Dúvida no Ex. 7 da Aula 4 - Melhorando a qualidade das palavras

Olá pessoal,

Se possível gostaria de ajuda. Ao tentar realizar o exercício no ex. 7 quando coloco "font-size=400%;" as palavras mudam de lugar tive que ajustar o top, left ou right. Outro fato curioso é que a expressão "Código limpo" estão com as palavras sobrepostas, não entedi porque. Segue abaixo o CSS:

.palavras-home li{
    font-size: 400%;
}
.palavras-home{
    perspective: 6px;
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.eficiencia{
    top: 30%;
    left: 70%;
    -webkit-transform: translate(-50%, -50%) rotate(15deg) translateZ(2px);
    transform: translate(-50%, -50%) rotate(15deg) translateZ(2px) scale(0.25);
}
.boas-praticas{
    top: 30%;
    right:0%;
    -webkit-transform: translate(-50%, -50%) rotate(-15deg) translateZ(1px);
    transform:translate(-50%, -50%) rotate(-15deg) translateZ(1px) scale(0.25); 
}
.codigo-limpo{
    top: 45%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px) scale(0.25);
}
.css3{
    top: 25%;
    right: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}
.html5{
    top: 20%;
    left: 64%;
    -webkit-transform: translate(-50%, -50%) rotate(-8deg) translateZ(-1px);
    transform: translate(-50%, -50%) rotate(-8deg) translateZ(-1px) scale(0.25);
}
.javascript{
    top: 45%;
    right: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-8deg) translateZ(-2px);
    transform: translate(-50%, -50%) rotate(-8deg) translateZ(-2px) scale(0.25);   
}
.acessibilidade{
    top: 65%;    
    right: 5%;
    -webkit-transform: translate(-50%, -50%) rotate(9deg) translateZ(3px);
    transform: translate(-50%, -50%) rotate(9deg) translateZ(3px) scale(0.25);
}
.responsivo{
    top: 60%;
    left: 68%;
    -webkit-transform: translate(-50%, -50%) rotate(-9deg) translateZ(3px);
    transform: translate(-50%, -50%) rotate(-9deg) translateZ(3px) scale(0.25);
}
.otimizações{
    top: 71%;
    left: 70%;
    -webkit-transform: translate(-50%, -50%) rotate(12deg) translateZ(-1    px);
    transform: translate(-50%, -50%) rotate(12deg) translateZ(-1px) scale(0.25);
}
.agilidade{
    top: 55%;
    right: 33%;
    -webkit-transform: translate(-50%, -50%) rotate(-13deg) translateZ(0px);
    transform: translate(-50%, -50%) rotate(-13deg) translateZ(0px) scale(0.25);
}
.design{
    top: 105%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) translateZ(-2px);
    transform: translate(-50%, -50%) translateZ(-2px) scale(0.25);
}

Obrigado.