Posição dos elementos

Boa tarde. Fiz o exercício e acabei tendo que reposicionar as palavras mais uma vez. Gostaria de saber o porque disso já que em outro exercício foi explicado que colocando o translate(-50%, -50%) em cada elemento evitaria que os mesmos mudassem de posição caso mudasse o tamanho da fonte. Fiz o teste e realmente funcionou, mas agora aumentando e dando scale, deu problema.

E uma segunda dúvida: o position:absolute está se comportando de forma estranha. O objeto pai está do tamanho do header e mesmo assim quando coloco left: 0 no objeto filho ele não fica realmente no canto, mas sim cortado. Fiz o teste com e sem o translate(-50%, -50%) e, mesmo em diferentes proporções, o problema se manteve.

Segue o trecho do HTML:

<header class="titulo">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>

    <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>

    <a class="banner-twitter" href="#"> Siga-me no twitter</a>

    </header>

E o CSS:

html{
    overflow-x: hidden;
}

.foto-home {
    height: 10.5rem;
    border-radius: 50%;
    margin-top: .5em;
}

.palavras-home {
    perspective: 25px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.palavra-home{
    position: absolute;
    font-family: "Shadows Into Light", sans-serif;
    font-weight: bold;
    color:#D5447E;
    font-size: 4rem;

}

.eficiencia{
    top:36%;
    left: 26%;
    transform: scale(.25) rotate(10deg) translateZ(4px) translate(-50%, -50%);
}

.boas-praticas{
    top:13%;
    right: 25%;
    transform: scale(.25) rotate(-10deg) translateZ(4px) translate(-50%, -50%);
}

.codigo-limpo{
    top:20%;
    left:27%;
    transform: scale(.25) rotate(12deg) translateZ(4px) translate(-50%, -50%);
}

.css3{
    top:56%;
    right: 30%;
    transform: scale(.33) rotate(7deg) translateZ(3px) translate(-50%, -50%);
}

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

.javascript{
    top:35%;
    right: 21%;
    transform:scale(.33) rotate(-8deg) translateZ(3px) translate(-50%, -50%);
}

.acessibilidade{
    top:46%;
    left:10%;
    transform:scale(.25) rotate(-7deg) translateZ(4px) translate(-50%, -50%);
}

.responsivo{
    top:23%;
    right: 14%;
    transform:scale(.33) rotate(13deg) translateZ(3px) translate(-50%, -50%);
}

.otimizacoes{
    top:13%;
    left:17%;
    transform:scale(.40) rotate(-13deg) translateZ(2px) translate(-50%, -50%);
}

.agilidade{
    top:60%;
    right: 13%;
    transform:scale(.33) rotate(13deg) translateZ(3px) translate(-50%, -50%);
}

.design{
    top:74%;
    left: 20%;
    transform:scale(.25) rotate(13deg) translateZ(4px) translate(-50%, -50%);
}