As palavras vão para o canto da tela.

Tentei realizar o exercício de perspective, mas o código não funciona, olhei a resposta do professor e apliquei, mas todas as palavras vão para o canto da tela e não parecem ter efeito 3d, só ficam um pouco borradas (se ampliadas), consigo consertar a posição de cada palavra, aumentando ou diminuindo as coordenadas x,y " translate(-50%, -50%) ", mas o resto fico na duvida, a começar:

.palavras-home {
    transform: perspective(6px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

para que servem os parametros top, left, width. height? eu retirei eles e simplesmente não mudou nada....

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

os parâmetros top e left dessa sentença também não fazem muito sentido, uma vez que também retirando, não há alterações......

minha teoria para ambos os casos é pra definir a posição inicial antes do translate mudar para a posição definida, mas então pra que escrever duas vezes a mesma informação?

e surgiu um problema: a parte do banner a direita, agora está mostrando uma parte fora do site.... e não faço ideia de onde veio....

e a ultima duvida é, o objetivo do exercício é criar um objeto 3d? ou uma especie de perspectiva das palavras? porque se no segundo caso não seria mais fácil deixar umas palavras maiores e outras menores em posições estáticas pra simular a ideia de profundidade?

Desde já agradeço, passei a tarde no console tentando fazer testes e resolver :)

Segue o código:

.banner {
    position: absolute;
    top: 50px;
    left: 100;
    transform-origin: 0 0;
    transform: translate(1100px, -90px) rotate(45deg);
}

.link-do-banner{
    width: 14em;
    line-height: 1;
    padding: 1em 5em;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;
    font-size: 1em;
    font-family: "Open Sans Condensed", sans-serif;

}

header {
    position: relative;
}
.palavra-home{
    color: #D5447E;
    font-family: Shadows Into Light;
    font-weight: bold;  
}
.palavras-home {
    transform: perspective(6px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.eficiencia {
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}