Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Porque são necessárias as propriedades top, left, width e height na classe CSS que contém perspective

Olá pessoal,

Antes quando não havia perspectiva, nas palavras era só utilizar o top e left que a palavra ficava no local desejado.

Porque na classe palavras-home é necessário utilizar top, left com valor 0, e também width e height com 100% para que as palavras ficquem corretamente posicionadas? Porque apenas perspective e position: absolute não são suficientes?

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

Desde já obrigado! Atte.

5 respostas

Oi Elías, tudo bem? Pelo que li na documentação da MDN. Quando você usa o perspective em um elemento, duas coisas acontecem: Uma nova pilha de contexto é criada (no eixo Z, onde um elemento pode sobrepor o outro) e o elemento com perspective irá ser considerado um fixed block para os elementos contidos nele.

Um fixed block é aquele do position fixed. Neste caso, apesar de usar position absolute e tal, para seus filhos, ele será um fixed. Entende? Por isso você recorre a essas propriedades extras.

Olá Wanderson, tudo bem e contigo?

Não entendi muito bem... O que seria esta interferência nos filhos que um elemento com "perspective" causa ao ser tratado como fixed? Apesar do pai ser considerado "fixed", porque os filhos com propriedades top, left etc não deveriam se posicionar conforme estas propriedades, terem autonomia, afinal o fixed não é do elemento com perspective?

Além disso, porque o elemento com perspective não ocupa todo o espaço que ocupava antes (sem perspective), ou seja, porque agora com perspective é necessário definir o espaço/tamanho dele com width, height, ao invés disso porque ele não se expande conforme os espaços ocupados pelos filhos, através das propriedades top/left, porque ele simplesmente ignora as propriedades dos filhos e faz com que todos os filhos ocupem (praticamente) o mesmo espaço?

Exemplo de elemento filho (não fica posicionado no espaço definido nas propriedades devido ao pai começar a utilizar a propriedade perspective) :

.eficiencia {
    top: 35%;
    left: 33%;
}

Desde já obrigado! Atte.

solução!

Elías, você lembra do comportamento do position fixed? Ele sai do fluxo da página e por isso não é criado um espaço para ele nela. Dessa forma, você sempre precisa definir um width, height, e posicioná-lo com top, right, bottom e left. Certo?

Apesar dos elementos filhos ainda aparecerem na página, é como se o elemento com fixed não existisse. Então o posicionamento dos elementos filhos, que consideram o posicionamento do elemento pai, se perdem também. Faz sentido?

Bom, o fixed também faz com que o posicionamento do elemento leve em consideração o viewport do dispositivo, ficam visível mesmo com scroll. Correto?

O que acontece quando a gente usar o perspective? O elemento com perspective vai se comportar como um elemento fixed, porém, com uma diferença: seu posicionamento não será pelo viewport, mas sim pelo elemento pai (imagine que é uma mistura de fixed com relative). O resto continua igual. Se ele não tem dimensões definidas, ele meio que some na página. (não é criado espaço pra ele, ele é fixed, lembra?).

É meio confuso mesmo. Esclareceu mais?

Olá Wanderson, perfeito, esclareceu sim!

Muito obrigado! Atte.

Opa, qualquer dúvida é só chamar Elías! Bons estudos!