Fiz as modificações e as palavras voltaram para a horizontal.

Por que isto acontece? Como modificar para as palavras aparecerem em tamanhos diferentes?

O meu html está assim:

<ul "palavras-home">
        <li class="palavra-home eficiencia">Eficiência</li>
        <li class="palavra-home boas-praticas">Boas práticas</li>
        <li class="palavra-home codigo-limpo">Código limpo</li>
        <li class="palavra-home css3">CSS3</li>
        <li class="palavra-home html5">HTML5</li>
        <li class="palavra-home javascript">JavaScript</li>
        <li class="palavra-home acessibilidade">Acessibilidade</li>
        <li class="palavra-home responsivo">Responsivo</li>
        <li class="palavra-home otimizacoes">Otimizações</li>
        <li class="palavra-home agilidade">Agilidade</li>
        <li class="palavra-home design">Design</li>
      </ul>

O meu css está assim:

.palavras-home{
  perspective: 5px;
  position:absolute;
}
.palavra-home {
  font-family: "Shadows Into Light";
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #D5447E;
}
.eficiencia{
position: absolute;
top:20%;
left: 75%;
transform: rotate(15deg);
transform: translateZ(-3px);
transform: translate(-50%, -50%);
}
.boas-praticas{
position: absolute;
top:75%;
left: 15%;
transform: rotate(20deg);
transform: translateZ(-2px);
transform: translate(-50%, -50%);
}
.codigo-limpo{
position: absolute;
top:20%;
left:20%;
transform: rotate(30deg);
transform: translateZ(4px);
transform: translate(-50%, -50%);
}
.css3{
  position: absolute;
  top: 35%;
  left: 30%;
  transform: rotate(45deg);
  transform: translateZ(2px);
  transform: translate(-50%, -50%);

}
.html5{
  position: absolute;
  top: 40%;
  left: 85%;
  transform: rotate(60deg);
  transform: translateZ(-8px);
  transform: translate(-50%, -50%);

}
.javascript{
  position: absolute;
  top: 5%;
  left: 65%;
  transform: rotate(30deg);
  transform: translateZ(-5px);
  transform: translate(-50%, -50%);

}
.acessibilidade{
  position: absolute;
  top: 40%;
  left: 15%;
  transform: rotate(170deg);
  transform: translateZ(2px);
  transform: translate(-50%, -50%);

}
.responsivo{
  position: absolute;
  top: 10%;
  left: 10%;
  transform: rotate(25deg);
  transform: translateZ(-3px);
  transform: translate(-50%, -50%);

}
.otimizacoes{
  position: absolute;
  top: 35%;
  left: 70%;
  transform: rotate(10deg);
  transform: translateZ(1px);
  transform: translate(-50%, -50%);

}
.agilidade{
  position: absolute;
  top: 5%;
  left: 30%;
  transform: rotate(75deg);
  transform: translateZ(2px);
  transform: translate(-50%, -50%);

}
.design{
  position: absolute;
  top: 25%;
  left: 60%;
  transform: rotate(115deg);
  transform: translateZ(5px);
  transform: translate(-50%, -50%);
}