Transformações simples
Mover, girar ou ampliar um elemento sem afetar o layout ao redor dele, um recurso puramente visual que combina muito bem com transition.
Estudar esta lição interativa →A propriedade transform aplica mudanças visuais (mover, girar, ampliar/reduzir) a um elemento sem afetar o espaço que ele ocupa no layout ao redor, diferente de mudar width ou margin, que empurram outros elementos. Combinada com transition, ela é a base de boa parte das microinterações que dão sensação de "vida" a uma interface.
scale()
transform: scale(1.05);Amplia (acima de 1) ou reduz (abaixo de 1) o tamanho visual do elemento.
translateY() / translateX()
transform: translateY(-4px);Move o elemento alguns pixels, sem afetar o fluxo do layout ao redor.
rotate()
transform: rotate(15deg);Gira o elemento em graus, no sentido horário (valores positivos).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. scale() no hover, junto com transition e box-shadow, cria o efeito clássico de "cartão que reage ao mouse".
Um exemplo de produto real: cartões de produto que crescem sutilmente (um scale(1.03), por exemplo) e ganham sombra ao passar o mouse são um padrão visual extremamente comum em lojas on-line e catálogos, um sinal sutil de "isto é interativo, passe o mouse ou clique aqui" sem precisar de nenhum texto explicando.
Transformações chamativas demais (rotações grandes, escalas exageradas) cansam e distraem em vez de ajudar. A maioria das interfaces profissionais usa mudanças sutis (poucos graus, poucos pixels, escala perto de 1), o suficiente para o olho perceber sem virar um espetáculo à parte.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione o hover com rotate().