Boa tarde.Gostaria de saber se existe alguma página que fala sobre todos essas transformações que o CSS faz?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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!