Boa tarde.
Gostaria de saber se existe alguma página que fala sobre todos essas transformações que o CSS faz?
Boa tarde.
Gostaria de saber se existe alguma página que fala sobre todos essas transformações que o CSS faz?
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
Olá tudo bem, vou ti passar 3 links onde 2 são de vídeos.
o ultimo é 3D espero está ajudando se precisar só chamar aqui!
https://www.youtube.com/watch?v=NwZZEiu4rkI
https://www.youtube.com/watch?v=B-vEwHOT6dM
por favor se possível marcar solucionado.
Muito Obrigado de verdade!