Quando uso o translateZ, a palavra some e aparecem barras de rolagem no header e horizontais. Já tentei mexer no width dela e não teve efeito. Se eu coloco uma perspectiva muito maior que o translateZ, a palavra tem um leve efeito 3d, mas nada como no exemplo. Segue css e html abaixo:
HTML
<header class="titulo-principal">
<img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
<a class="banner-tw" href="https://twitter.com/joaodasilva">Siga-me no Twitter</a>
<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>
</header>CSS
header{
position: relative;
overflow-x: hidden;
}
.palavras-home{
position: absolute;
perspective: 10px;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.palavra-home{
font-family: "Shadows Into Light",cursive;
color: #D5447E;
transform-style: preserve-3d;
}
.eficiencia{
position: absolute;
top: 30%;
left: 76%;
transform:translate(-50%,-50%) rotate(5deg)translateZ(5px);
width: 10px;(Fiz um recorte do código para apresentar apenas as partes relevantes)
