Onde existe todos esses códigos | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

solução!

por Gabriela Nori

| 107.2k xp | 50 posts

12/02/2021

Olá Roberto, tudo bem?

Vou deixar pra você algumas referências sobre transformações e transições com CSS lá no fim algumas documentações e blogs:

Sobre o Transform:

Transformações são disparadas quando um elemento muda de estado, tais como clicar com o mouse (on mouse click) e posicionar o cursor do mouse no elemento (on mouse hover).

Scale

Aumenta o tamanho do elemento.

Exemplo:

div:hover {
  transform: scale(1.2);
}

Um valor de 2, por exemplo, vai dobrar o tamanho do elemento. Um valor de 0.5, vai encolher o elemento para metade do seu tamanho original.

Também é possível aplicar scale apenas na largura (eixo X) ou altura (eixo Y) do elemento.

/* somente no eixo X */
div:hover {
  transform: scaleX(2);
}

/* aplicando valores diferentes para X e Y */
div:hover {
  transform: scale(2, 4);
}
rotate
Rotaciona o elemento no sentido horário.

O argumento é passado em número de graus a ser rotacionado, ex.: 90deg. Valores negativos fazem a rotação acontecer no sentido anti-horário.

div:hover {
  transform: rotate(-180deg);
}

Sobre a propriedade Transition

Possui quatro propriedades para você configurar:

transition-property: border-color; transition-duration: Duração do efeito em segundos (o padrão é 0). Também é obrigatória na declaração pois, se omitida, assume seu valor default que é zero e a transição não vai ter efeito.
transition-duration: 1s;
transition-timing-function: Forma como a transição progride no tempo (o padrão é ease). Falando de um jeito mais fácil, é como se comporta o ritmo da transição durante o efeito. Pode ser usado de duas maneiras: uma é utilizando alguns valores já pré-definidos que são: linear, ease, ease-in, ease-out e ease-in-out;
transition-delay: Define a partir de quanto tempo (em segundos) o efeito da transição vai se iniciar (o padrão é 0). transition-delay: 0.1s; Passe o mouse sobre o retângulo cinza no exemplo abaixo para ver a transition em ação:

Segue a refêrencia com a documentação:

Espero ter ajudado,

Até mais