Gostaria de confirmar se não fiz uma gambiarra no código

Pessoal, o exercício diz que o translate tem que receber o valor de (-50%,-50%), porém no meu código, se utilizar esse valor, todas as palavras ficam fixadas no canto esquerdo inferior do header. Para conseguir posicionar as palavras, tive que alterar esse valor, conforme código abaixo. A questão é, isso é uma gambiarra ou um outro jeito de codificar?

html,body {
    overflow-x: hidden;
    height: 100%;
}
body {
    perspective: 6px;
    perspective-origin: 50% 160px;
}

.palavras-home {
    transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
}
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    font-size: 400%;
    color: #D5447E;
    position: absolute;
}
.eficiencia {
    top: 50%;
    left: 60%;
    transform:translate(75%, -75%) rotate(-5deg) translateZ(4px) scale(0.25);
}
.boas-praticas {
    top: 70%;
    left: 20%;
    transform: translate(140%, -70%) translateZ(1px) rotate(10deg) scale(.20);
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    transform: translate(-30%, -65%) translateZ(2px) rotate(-10deg) scale(.15);
}
.css3 {
    top: 55%;
    left: 35%;
    transform: translate(45%, -85%) translateZ(2px) rotate(5deg) scale(.25);
}
.html5 {
    top: 30%;
    left: 65%;
    transform: translate(0%, -55%) translateZ(2px) rotate(10deg) scale(.25);
}
.javascript {
    top: 15%;
    left: 60%;
    transform: translate(50%, -52%) translateZ(1px) rotate(-5deg) scale(.15);
}
.acessibilidade {
    top: 30%;
    left: 35%;
    transform: translate(-10%, -110%) translateZ(3px) rotate(-5deg) scale(.20);
}
.responsivo {
    top: 40%;
    left: 40%;
    transform: translate(75%, -110%) translateZ(3px) rotate(10deg) scale(.15);
}
.otimizacoes {
    top: 70%;
    left: 65%;
    transform: translate(70%, -50%) translateZ(2px) rotate(-5deg) scale(.15);
}
.agilidade {
    top: 75%;
    left: 35%;
    transform: translate(80%, -110%) translateZ(1px) rotate(5deg) scale(.25);
}
.design {
    top: 40%;
    left: 60%;
    transform: translate(-20%, -110%) translateZ(2px) rotate(10deg) scale(.15);