Origem da Transformação e Perspectiva

Por padrão, as transformações ocorrem em torno do ponto central do elemento: 50% 50%. A propriedade transform-origin altera esse pivô.

Aceita palavras-chave, porcentagens ou comprimentos. Formato: x-axis y-axis z-axis.

Dimensionamento a partir do canto superior esquerdo, útil para animações de expansão de menus suspensos:

Gire o ponteiro de um relógio em torno de sua base:

perspective define a distância entre o usuário e o plano z=0 para transformações 3D. Valores menores criam uma distorção de perspectiva mais intensa; valores maiores criam uma profundidade sutil.

Altera o ponto de fuga da perspectiva. O padrão é o centro (50% 50%).

perspective() também pode ser utilizada como função de transformação no próprio elemento, e não no elemento pai. Isso limita o contexto 3D somente a esse elemento.

Por padrão, as transformações 3D dos elementos filhos são achatadas em 2D. Defina transform-style: preserve-3d no elemento pai para manter o posicionamento 3D verdadeiro dos elementos filhos.

O cartão que vira clássico, utilizando perspective e preserve-3d:

backface-visibility: hidden oculta a face posterior de um elemento transformado em 3D. É essencial para cartões que viram quando a parte de trás não deve ficar visível através da frente.

Um efeito dramático de inclinação 3D ao passar o cursor, que responde à posição do cursor:

Um menu suspenso utiliza transform: scaleY(0) para ocultar-se e scaleY(1) para mostrar-se. Qual valor de transform-origin faz com que ele cresça para baixo a partir do topo?

transform-origin altera o ponto de pivô para rotações e dimensionamentos — algo essencial para expansões de menus suspensos, ponteiros de relógio e inclinações ao passar o cursor. perspective no elemento pai cria o contexto de profundidade 3D. transform-style: preserve-3d habilita elementos 3D aninhados. backface-visibility: hidden oculta a parte posterior dos elementos em efeitos de cartões que viram.