2
respostas

Translate para centralizar as palavras após alteração do eixo Z não funciona.

Caros,

Executei o código conforme a tarefa descrevia, consegui entender a execução do translateZ(4px) mas a aplicação do translate(-50%, -50%), para que a palavra permaneça no mesmo lugar não funcionou...

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

.palavra-home {
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;   
}

.eficiencia {
    top: 20%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
            transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);      
}
2 respostas

Eu tinha imaginado que o translate(-50%, -50%) era usado para posicionar a imagem num mesmo lugar, independente da profundidade usada no translateZ( ), mas ele é apenas para mudar a centralização do objeto, para que não ocorra alterações de lugar quando houver mudança no tamanho da fonte das palavras. Sempre que houver alteração no eixo Z será necessário reposicionar a palavra.

Oi Lucas, tudo bem?

Exatamente isso, se você passa o translate assim ele vai aplicar X e Y respectivamente.

Usamos muito ele quando precisamos centralizar um elemento posicionado com absolute.

Abcs!