PERSPECTIVE | HTML5 e CSS3 II: Turbinando as suas páginas

Boa tarde, Allan! Tudo certo? =)

O primeiro ponto é que as propriedades perspective e perspective-origin geralmente andam juntas.

perspective é utilizado para dar certa profundidade ao elemento, ou seja, ele altera a distância entre o plano Z e o usuário... Então, se você colocar, por exemplo, perspective: 10px em um elemento, ele distará 10px do usuário, dando uma sensação de perspectiva, mesmo. =)

Já o perspective-origin, como o próprio nome sugere, é usado para alterar a origem dessa perspectiva. Pense nela como um ponto, de onde o usuário estará olhando para o elemento... =)

Para tentar dar uma facilitada, dê uma olhada no seguinte código, tirado do CSS-Tricks:

<html>
    <head>
        <style>
            .cube {
                font-size: 5em;
                height: 2em;
                width: 2em;
                margin: 1em auto;
                transform-style: preserve-3d;
                perspective: 500px;
                animation: move-origin infinite 2s;
            }

            .side {
                position: absolute;
                height: 2em;
                width: 2em;
                background: rgba(255, 0, 0, 0.6);
                border: 1px solid rgba(0, 0, 0, 0.5);  
                color: white; 
                text-align: center;
                line-height: 2em;
            }

            .front  { transform:                  translateZ(1em); }
            .top    { transform: rotateX( 90deg)  translateZ(1em); }
            .right  { transform: rotateY( 90deg)  translateZ(1em); }
            .left   { transform: rotateY(-90deg)  translateZ(1em); }
            .bottom { transform: rotateX(-90deg)  translateZ(1em); }
            .back   { transform: rotateY(-180deg) translateZ(1em); }

            @keyframes move-origin {
                0%   { perspective-origin: 0%     0%; }
                25%  { perspective-origin: 100%   0%; }
                50%  { perspective-origin: 100% 100%; }
                75%  { perspective-origin: 0%   100%; }
                100% { perspective-origin: 0%     0%; }
            }
        </style>
    </head>
    <body>
        <div class="cube">
            <div class="side  front">1</div>
            <div class="side   back">6</div>
            <div class="side  right">4</div>
            <div class="side   left">3</div>
            <div class="side    top">5</div>
            <div class="side bottom">2</div>
        </div>
    </body>
</html>

Repare que a classe cube possui perspective: 500px, ou seja, é como se ele estivesse a 500px de distância de nós! Além disso, a animação move-origin está alterando a perspective-origin, parecendo que estamos olhando o cubo de cada um dos quatro vértices frontais. =)

Sobre o translate(-50%, -50%), eu não cheguei a achar esse código específico, então não consigo lhe dizer como estava no exercício, mas vamos lá... Quando você usa a propriedade translate, você está transladando o elemento, ou seja, mudando sua posição. Quando você passa um valor fixo, como 10px, fica fácil de entender que ele se moverá 10px naquela direção, por exemplo:

translate(100px, -50px);

Esse código fará com que o elemento se mova 100px para a direita, e 50px para cima... Pense na tela como um sistema de coordenadas... O canto superior esquerdo seria o (0, 0). O eixo X é positivo para a direita, enquanto que o Y, para baixo.

Agora, o que acontece quando passamos uma porcentagem para essa função? Tipo translate(-50%, -50%)?

A porcentagem é entendida como uma fração do tamanho do elemento, ou seja, o código que você mencionou deve levar o elemento para cima e para a esquerda... Mas quanto? Metade da altura e da largura do elemento em questão! =)

Observe a seguinte classe:

.centraliza {
    position: absolute;
    top: 50%;
    left: 50%;
}

Essa classe centraliza irá deixar o canto superior esquerdo do elemento no centro da página, portanto não estará de fato centralizado! Se quisermos centralizá-lo, precisamos fazer com que o centro do elemento esteja no centro da página, assim:

.centraliza {
    position: absolute;
    top: 50%;
    left: 50%;
    translate(-50%, -50%);
}

E aí, agora conseguiu entender? Espero que tenha conseguido tirar sua dúvida, mas se ainda sobrou algo, não deixe de postar por aqui para podermos auxiliá-lo!

Abraço e bons estudos,

Fábio

Mergulhe em programação