Resumen Curso de Tranformaciones y Transiciones en CSS

Este es un pequeño repositorio para plasmar pequeños ejercicios y ejemplos de los temas vistos en este curso impartido por la gran @teffCode

Tranformaciones en 2D y 3D

Estes es un pequeño resumen sobre la clase 5 (transform traslate) y clase 6 (transform rotate, scale, skew y matrix)

En estas clases podemos aprender a usar las propiedades rotate, scale, skew y traslate. La profe lo explica de una forma excelente y aqui te dejo unos pequeños ejemplos de estas tranformaciones:
(coloca el puntero sobre las figuras para ver las tranformaciones)

Traslate

transform: translate(-20px , 20px)

transform: translateX(50px);

transform: translateY(50px);

Scale

transform: scale(1.4);

transform: scaleX(1.4);

transform: scaleY(1.4);

Skew

transform: skew(40deg)

transform: skewX(40deg)

transform: skewY(40deg)

Rotate

transform: rotate(500deg)

transform: rotateX(500deg)

transform: rotateY(500deg)

Origin

transform-origin: right top

transform-origin: right bottom

transform-origin: left top

transform-origin: left bottom

Transition property y duration

En este modulo comenzamos a hacer un poco mas interesantes las animaciones, agregando algunas propiedades a nuestras transformaciones. (Recuerda colocar el puntero sobre las figuras)

Traslate

transform: translate(-20px , 20px) transition: transform 1s

transform: translateX(50px); transition: transform 1.5s

transform: translateY(50px); transition: transform 2s

Scale

transform: scale(1.4); transition: transform 1s

transform: scaleX(1.4); transition: transform 1.5s

transform: scaleY(1.4); transition: transform 2s

Skew

transform: skew(40deg) transition: transform 1s

transform: skewX(40deg) transition: transform 1.5s

transform: skewY(40deg) transition: transform 2s

Rotate

transform: rotate(500deg) transition: transform 1s

transform: rotateX(500deg) transition: transform 1.5s

transform: rotateY(500deg) transition: transform 2s

Origin

transform-origin: right top transition: transform 1s

transform-origin: right bottom transition: transform 1.5s

transform-origin: left top transition: transform 2s

transform-origin: left bottom transition: transform 2.5s

Es muy interesante los resultados obtenidos con solo agregar una propiedad más, a mí me gustaron mucho y me emociona seguir con estos cursos 😁💚.

En esta clase aprendimos a usar la propiedad transition para que nuestras transformaciones se vean cada vez más cheveres 😎.