Quando coloco translateZ a palavra some. | Alura

Estou criando um site conforme modelo do curso II de HTML & CSS da formação de Front-End, porém estou travado em uma parte e preciso de ajuda. Quero fazer o efeito 3D e paralaxe nas palavras, mas por algum motivo, toda vez que coloco a propriedade translateZ, a palavra some da minha página. O que eu estou fazendo de errado? Poderiam me ajudar?

CÓDIGO HTML

<body>
    <main>
        <div class="titulo">
            <img class="foto-titulo" src="img/eu.jpg" alt="Foto Paulo da Silva">
            <p class="meu-nome">Paulo da Silva</p>
            <p class="profissao">Front-End Developer</p>
        </div>

        <section class="palavras-chaves">
            <p class="html">HTML</p>
            <p class="css">CSS</p>
            <p class="javascript">Javascript</p>
            <p class="eficiencia">Eficiência</p>
            <p class="codigo-limpo">Código Limpo</p>
            <p class="responsivo">Responsivo</p>
        </section>

        <div class="texto-site">
            <p>Meu nome é <span class="texto-chave">Paulo</span> e eu faço sites <span class="texto-chave">maravilhosos</span>!</p>
            <section class="botao-entrar">
                <p><a href="biografia.html">Entrar no site</a></p>
            </section>
    </main>
</body>
</html>

CÓDIGO CSS

body{
    font-size: 120%;
    font-family: 'Krub', sans-serif;
}

.titulo{
    padding: 1rem;
    text-align: center;
    background-color: #b1015a;
    background-image: linear-gradient(to bottom right, #b1015a, black);
}

.foto-titulo{
    height: 12rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 2rem black;
    border-radius: 50%;
}

.meu-nome, .profissao{
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
    color: #eee;
    margin-bottom: .5rem;
    text-shadow: 0 0 .2rem black;
}

.profissao{
    font-size: 1rem;
}

.palavras-chaves{
    font-weight: bold;
    color: #eee;
    text-transform: lowercase;
    text-shadow: 0 0 .2rem black;
    perspective: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.html{
    position: absolute;
    top: 3rem;
    left: 6rem;
    -webkit-transform: translate(-50%, -50%) translateZ(1rem) rotate(10deg) scale(2);
    transform: translate(-50%, -50%) translateZ(1rem) rotate(10deg) scale(2);
}

Obrigado pela ajuda!

Paulo da Silva