Capitulo 4 - Transformações, Ex. 5 - Palavras em 3D

Gostaria de postar meu código para ser analisado por alguém mais experiente, pois não consigo descobrir onde está o erro e porque as letras não aumentam. Alguém enfrentou o mesmo problema?

Trecho HTML

<ul class="palavra-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>

Trecho do CSS, conforme aula:

.palavra-home {    
    font-family: 'Shadows Into Light', cursive;
    font-weight: bold;
    font-size: .3em;
    color: #D5447E;

    /*Adicionando Perspectiva*/

    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.eficiencia {
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}
.boas-praticas {
  top: 70%;
  left: 20%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}
.codigo-limpo {
  top: 45%;
  left: 25%;
  transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px);
}
.css3 {
  top: 55%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(5deg) translateZ(2px);
}
.html5 {
  top: 30%;
  left: 65%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}
.javascript {
  top: 15%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px);
}
.acessibilidade {
  top: 30%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px);
}
.responsivo {
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(3px);
}
.otimizacoes {
  top: 70%;
  left: 65%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}
.agilidade {
  top: 75%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(5deg) translateZ(1px);
}
.design {
  top: 40%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}