Letras grandes antes mesmo do font-size: 400%

CSS

.palavra-home {
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
}

.palavras-home {
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: .6em;
}

.palavras-home li {
    font-size: 400%;
}

.eficiencia {
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px) scale(0.25);
}

.boas-praticas {
    top: 65%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px) scale(0.25);
}

.codigo-limpo {
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px) scale(0.25);
}

.css3 {
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(2px) scale(0.25);
}

.html5 {
    top: 30%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}

.javascript {
    top: 15%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25);
}

.acessibilidade {
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px) scale(0.25);
}

.responsivo {
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(3px) scale(0.25);
}

.otimizacoes {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px) scale(0.25);
}

.agilidade {
    top: 70%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(1px) scale(0.25);
}

.design {
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}

HTML

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

Tive que colocar o estilo font-size: .6em para as letras ficarem menores, algo que não constava na resposta. Solucionou o problema, mas queria entender porque foi necessário isso, por quê que sem essa diminuição da fonte, as letras estão absurdamente grandes.

Print da tela com font-size: 400%, scale(0.25), font-size=.6em: https://imgur.com/WSpNflf

Print da tela com font-size: 400%, scale(0.25), sem font-size=.6em: https://imgur.com/LSQK4jz

Print da tela sem font-size: 400%, scale(0.25), font-size=.6em: https://imgur.com/hzr7OSl