translate()

A propriedade translate() move um elemento ao longo dos eixos X e Y. Imagine uma borboleta pousando suavemente em uma flor; a borboleta (elemento) se move de um lugar a outro no espaço 2D.

rotate()

A propriedade rotate() gira um elemento em torno de um ponto de referência (normalmente o centro). Pense em uma bússola girando para apontar o norte; o ponteiro (elemento) gira. Usando rotate(45deg), podemos girar um quadrado em 45 graus no sentido horário.

rotateX() e rotateY()

Essas funções rodam o elemento em torno dos eixos X ou Y, dando uma sensação de profundidade, mesmo em 2D. Imagine uma folha de papel sendo virada horizontalmente (rotateX()) ou lateralmente (rotateY()). No exemplo rotateX(45deg), a folha parece inclinar-se para cima.

scale()

Com scale(), podemos aumentar ou reduzir o tamanho de um elemento. Pense em um balão que enche de ar (aumenta) ou desinfla (reduz). Usando scale(1.5), o elemento aumenta em 150%.

skew()

A propriedade skew() inclina um elemento ao longo dos eixos X e Y. Imagine um quadro sendo distorcido em forma de trapézio; ele se estica de um lado. Com skew(20deg, 10deg), inclinamos o elemento tanto no eixo X quanto no Y.

matrix()

A função matrix() combina várias transformações (como translate, rotate, scale e skew) em uma única operação. É como manipular todas essas propriedades ao mesmo tempo, controlando a transformação de forma precisa.

Perspectiva

A propriedade perspective cria uma ilusão de profundidade. Imagine olhar por uma janela e ver objetos que parecem mais próximos ou mais distantes. Com perspective(500px), criamos essa ilusão em elementos 3D, onde os objetos parecem maiores ou menores dependendo da distância do observador.

Ela deve ser aplicada ao elemento pai para dar a ideia de perspectiva ao elemento filho.

Rotacionando e movendo elementos no eixo Z

Com translateZ() e rotateZ(), movemos e giramos elementos ao longo do eixo Z, criando uma sensação de que eles se aproximam ou se afastam de nós. Imagine uma porta girando em seu eixo central (rotateZ(45deg)), ou um objeto movendo-se para dentro e para fora da tela com translateZ(100px).

Escalando elementos de forma tridimensional

O scale3d() permite dimensionar um elemento em três eixos (X, Y, Z). Pense em uma caixa que aumenta de tamanho em todas as direções ao mesmo tempo. Com scale3d(1.5, 1.5, 1.5), o elemento cresce em 150% em todas as dimensões.

transform-origin

O transform-origin define o ponto de origem da transformação, ou seja, o ponto ao redor do qual o elemento gira ou escala. Imagine um livro aberto: ele pode girar a partir da borda (origem) ou do centro. Usamos transform-origin: bottom right; para definir o canto inferior direito como ponto de origem.

transform-style

Com transform-style: preserve-3d;, permitimos que os elementos filhos de um contêiner mantenham suas propriedades 3D em relação ao pai. Isso significa que o conteúdo do elemento será renderizado em um espaço tridimensional. Imagine uma caixa com objetos flutuando dentro dela, todos preservando suas posições 3D.

Matrix3d

A função matrix3d() permite aplicar uma combinação de transformações tridimensionais em um único comando. Ela oferece controle total sobre a posição, rotação e escala em 3D. É uma ferramenta avançada para manipular objetos em um espaço 3D.

backface-visibility

Com backface-visibility: hidden;, podemos esconder a parte traseira de um elemento quando ele é girado. Imagine uma carta de baralho que, ao ser virada, esconde o lado de trás para mostrar apenas a frente.

Transições

As transições em CSS permitem que você modifique propriedades CSS de maneira suave ao longo do tempo. Ao invés de uma mudança abrupta, uma transição suaviza a modificação entre o estado inicial e o final. Por exemplo, ao mudar a cor de um botão ao passar o mouse, a transição controla a suavidade dessa mudança.

transition é um shorthand de transition-property + transition-duration + transition-timming-function + transition-delay.

• property indica para qual propriedade a transition será aplicada, diminuindo assim o tempo de renderização.

  HEY

• duration indica o tempo para que a transição se complete

• timming-function indica a curva de velocidade da transição.

  ease começa devagar, fica rápido e termina devagar

  ease

  linear mesma velocidade do início ao fim

  linear

  ease-in velocidade lenta no início

  ease-in

  ease-out velocidade lenta no final

  ease-out

  ease-in-out velocidade lenta no início e no final

  ease-in-out

  cubic-bezier() função personalizada

  Gerar cubic-bezier()

  cubic- bezier (n, n, n, n)

Exemplo: Imagine um botão que muda de azul para vermelho quando o usuário passa o mouse sobre ele. Com a transição, essa mudança de cor ocorre lentamente, criando uma experiência visual mais agradável.

Exemplo prático - transições e pseudo-elementos

Pseudo-elementos, como `::before` e `::after`, podem ser usados junto com transições para criar efeitos visuais interessantes. Por exemplo, podemos criar uma barra de progresso que se expande ao passar o mouse sobre um botão.

Exemplo: Um botão que, ao ser focado, mostra uma barra de progresso animada embaixo dele usando `::after` e a propriedade `width` com uma transição.

Outro exemplo - lista de mercado

Iniciando com animações

As animações CSS permitem que você faça transformações complexas em elementos ao longo do tempo, controlando propriedades como `opacity`, `transform`, e `background-color`. Ao contrário das transições, as animações podem ter várias etapas, definidas com `@keyframes`.

Exemplo: Uma animação que faz uma imagem "pulsa" gradualmente, aumentando e diminuindo de tamanho repetidamente.

Definindo atraso e número de interações de uma animação

Você pode controlar o início de uma animação com a propriedade `animation-delay` e também definir quantas vezes a animação será executada com `animation-iteration-count`. Por exemplo, uma animação pode começar 2 segundos depois que a página carregar e repetir 3 vezes.

Exemplo: Um círculo que começa a expandir e contrair 2 segundos após o carregamento da página e repete esse ciclo 3 vezes.

Direção da reprodução e curva de velocidade da animação

A propriedade `animation-direction` permite que a animação seja executada em ordem inversa, ou que vá e volte (normal e reverso). Já a curva de velocidade pode ser controlada com `animation-timing-function`, criando efeitos como aceleração ou desaceleração da animação.

Exemplo: Uma caixa que cresce e encolhe com uma curva de aceleração no início e desaceleração no final, criando um efeito de suavidade.

Propriedade animation-fill-mode

O `animation-fill-mode` define o que acontece com o estilo do elemento antes e depois da execução da animação. Isso permite que a animação mantenha seu estado final, em vez de retornar ao estado inicial.

Exemplo: Uma caixa que fica "expandida" mesmo após o término da animação, usando `animation-fill-mode: forwards;`.

Pausando a animação e shorthand animation

A propriedade `animation-play-state` permite pausar e retomar uma animação. Além disso, você pode usar a propriedade abreviada `animation` para definir todas as propriedades da animação em uma única linha.

Exemplo: Um quadrado que pausa sua animação de rotação ao clicar e pode ser reiniciado com outro clique, usando `animation-play-state`.

Outros exemplos