Olá! Boa tarde! Eu li os tópicos do fórum e mesmo assim não consegui localizar meu erro, eu fiz as transformações como pedido em aula e mesmo assim não consigo o efeito 3D desejado, na verdade nem aparece o efeito, vocês poderiam me ajudar? Desde já, obrigado!

<header class="titulo-principal">
        <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>    

        <a class="banner-twitter" href="https://twitter.com/twitter-joaodasilva">Siga-me no Twitter</a>

        <ul class="palavras-cabecalho">
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home codigo-limpo">Código Limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home boas-praticas">Boas Práticas</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home design">Design</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
        </ul>
    </header>

.foto-home {
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.titulo-principal{
    position: relative;
}
.subtitulo-principal{
    font-size: 1rem;
    font-family: "Open Sans Condensed", sans-serif;
    text-align: center;
}

.palavras-cabecalho{
    transform: perspective(6px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.palavra-home{
    font-size: 1rem;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
}
.responsivo{    
    top: 10%;
    left: 20%;
    -webkit- transform: translate(-50%,-50%) rotate(10deg) translateZ(4px);
    transform: translate(-50%,-50%) rotate(10deg) translateZ(4px);
}
.agilidade{
    top: 15%;
    left: 5%;
    -webkit- transform: translate(-50%,-50%) rotate(-15deg) translateZ(-2px);
    transform: translate(-50%,-50%) rotate(-15deg) translateZ(-2px);
}
.acessibilidade{
    top: 25%;
    left: 25%;
    -webkit- transform: translate(-50%,-50%) rotate(-20deg) translateZ(3px);
    transform: translate(-50%,-50%) rotate(-20deg) translateZ(3px);
}
.codigo-limpo{
    top: 40%;
    left: 10%;
    -webkit- transform: translate(-50%,-50%) rotate(15deg) translateZ(-3px);
    transform: translate(-50%,-50%) rotate(15deg) translateZ(-3px);
}
.css3{
    top: 60%;
    left: 30%;
    -webkit- transform: translate(-50%,-50%) rotate(-20deg) translateZ(1px);
    transform: translate(-50%,-50%) rotate(-20deg) translateZ(-1px);
}
.boas-praticas{
    top: 65%;
    left: 15%;
    -webkit- transform: translate(-50%,-50%) rotate(10deg) translateZ(2px);
    transform: translate(-50%,-50%) rotate(10deg) translateZ(2px);
}
.javascript{
    top: 17%;
    left: 70%;
    -webkit- transform: translate(-50%,-50%) rotate(25deg) translateZ(5px);
    transform: translate(-50%,-50%) rotate(25deg) translateZ(5px);
}
.eficiencia{
    top: 25%;
    left: 80%;
    -webkit- transform: translate(-50%,-50%) rotate(15deg) translateZ(4px);
    transform: translate(-50%,-50%) rotate(15deg) translateZ(4px);
}
.design{
    top: 40%;
    left: 60%;
    -webkit- transform: translate(-50%,-50%) rotate(-20deg) translateZ(-5px)
    transform: translate(-50%,-50%) rotate(-20deg) translateZ(-5px);
}
.html5{
    top: 60%;
    left: 80%;
    -webkit- transform: translate(-50%,-50%) rotate(20deg) translateZ(4px);
    transform: translate(-50%,-50%) rotate(20deg) translateZ(4px);
}
.otimizacoes{
    top: 70%;
    left: 70%;
    -webkit- transform: translate(-50%,-50%) rotate(-25deg) translateZ(2px);
    transform: translate(-50%,-50%) rotate(-25deg) translateZ(2px);
}