Hola a todos. Hoy vamos a hablar brevemente sobre las transformaciones. Las transformaciones son muy similares a las transiciones, ya que proporcionan otra opción para cambiar la apariencia de los elementos que están en nuestra página. Así que podemos cambiar las cosas tanto de la manera bidimensional como de una manera tridimensional a medida que la gente está mirando su sitio. Así que veamos algunas de las opciones de transformación bidimensional. Vamos a hablar de traducir, rotar, escalar, sesgar y matriz, y cómo cada uno de estos puede funcionar dentro de su CSS3. La primera opción que voy a mostrarte es traducir. Lo que traduce hará es que puedes darle dos valores, los he llamado x e y y, dependiendo de esos valores, puedes mover el elemento hacia la izquierda y hacia la derecha o hacia arriba y hacia abajo. Si x es positivo, se mueve hacia la derecha, si es negativo se mueve hacia la izquierda. Con y, si es positivo te mueves hacia abajo y si es negativo te mueves hacia arriba. Así que veamos un ejemplo real para dejarlo un poco más claro. Aquí, tengo este bonito elemento azul. Y lo que estoy a punto de decir es que quiero traducirlo, 100 y 75. Así que vas a esperar ver cómo se mueve hacia la derecha y hacia abajo un poco. Así que puedes ver, de nuevo, es difícil saber cuándo sube y baja las cosas. Pero si nos fijamos en los márgenes, hemos aumentado casi efectivamente los márgenes. La siguiente opción es girar. Cuando rotas algo, estás girando, o como que me gusta pensar en ello como girar el elemento, un cierto número de grados. No ves el giro. Usted acaba de ver el resultado o cómo se vería al final. Así que aquí tengo otro elemento y voy a decirle que rote 30 grados. Así que desde aquí, hasta aquí. Ahora es muy importante que recuerde poner los grados. Si acaba de poner 30, muchos de los navegadores no van a tener ese trabajo. De hecho, la mayoría de ellos no lo harán. Así que asegúrate de darle los grados que quieras que gire, algún tipo de número, 30, 90, 80, y luego usa grado. A continuación, hablemos de escala. Y la escala es solo una forma elegante de decir, hagámosla más ancha o más alta. De nuevo, le das dos números, y eso es lo mucho que quieres cambiar el ancho y la altura de un elemento. Así que aquí tengo un bloque más pequeño, y he decidido que me gustaría hacerlo dos veces más ancho y tres veces más alto. Aquí hay un nuevo elemento después de la escala de transformación. Skew es muy difícil para mí explicar lo que hace, y es aún más difícil hacerlo porque siempre olvido mi izquierda y mis derechos cuando miro la cámara. Así que, de nuevo, vas a querer jugar con este y mirar algunos de los ejemplos. Lo que estás haciendo es girar el elemento un cierto número de grados alrededor del ángulo x y un cierto número de grados alrededor del ángulo y. Así que aquí voy a mostrarte un sesgo, 30 grados por 15 grados. Empiezas aquí y terminas un poco girado en un ángulo muy raro. Y de nuevo es muy difícil mostrarte esto cuando estoy mirando la pantalla, así que espero que escribas eso y juegues un poco con él. La siguiente y última opción es matriz. Y cuando utiliza la matriz, puede combinar todos los métodos de transformación 2D en un solo comando a la vez. Nunca uso esto, porque me parece demasiado confuso recordar cuál es la escala, cuál gira, cuál es el sesgo. Así que a menos que se sienta realmente seguro con su CSS3, evitaría usar matriz y seguir adelante y usar cada una de las otras transformaciones individuales de una a la vez. Así que las otras de las que acabamos de hablar eran transformaciones bidimensionales. También podemos hacer transformaciones tridimensionales, y son muy similares a las de las que acabamos de hablar. Así, por ejemplo, con rotación, ahora en lugar de simplemente girar a lo largo del eje x o y, también podemos girar alrededor de la dimensión z también. Por lo tanto, si desea utilizar una rotación 3D, sus opciones ahora son Transform:Rotatey cuántos grados, RotateX, RotateZ, o en realidad puede decir rotate3d y darle números a lo largo de cada dimensión. Rara vez uso las dimensiones 3D. Pero sí tenemos las opciones. Tenemos la rotación, tenemos la escala, y tenemos el traductor. Y realmente pueden hacer algunas cosas realmente interesantes con cómo quieres que tus elementos se vean. Cuando llega el momento de usar transformaciones, hay algunas cosas en las que pensar. Normalmente, cuando usa transformaciones, las va a usar con cambios de estado. Si recuerdas, eso significa que es posible que ocurra una transformación cuando haces una puesta sobre el cursor, o una en el foco, o una en activa. Si realmente solo estás tratando de cambiar el aspecto de un elemento desde el principio y dejarlo de esa manera, es posible que quieras pensar en tomar fotos y meterte con las imágenes y hacer las cosas fuera de línea. Es más rápido y no consume tanto ancho de banda. Sin embargo, es una forma genial de jugar con las cosas y ganar confianza con tu CSS. Por supuesto, con tantas cosas que hemos estado aprendiendo en esta clase, es importante recordar que a menudo necesitarás prefijos del navegador para que las transformaciones funcionen. Así que una herramienta más en su cinturón de herramientas para aprender a hacer algo emocionante con su página. Sé que no hice mi ejemplo normal aquí, pero el siguiente video mostrará un ejemplo usando transiciones, transformaciones y algunas de las otras cosas que hemos estado aprendiendo todo el tiempo. Espero que lo echen un vistazo y se sientan un poco más seguros de lo que acabamos de aprender con las transformaciones. Buena suerte.