1 00:00:00,620 --> 00:00:08,960 Bueno, ahora vamos a ver transformaciones, ¿vale? Es decir, cómo modificar elementos que ya están creados, ¿vale? Escalarlos, rotarlos, etcétera, etcétera. 2 00:00:10,380 --> 00:00:16,960 Para ello vamos a partir del archivo anterior que habíamos visto, el archivo de transiciones, ¿vale? Que estáis viendo aquí. 3 00:00:17,620 --> 00:00:24,019 Pues entonces lo que vamos a hacer simplemente es darle archivo y luego a guardar como, ¿vale? 4 00:00:24,019 --> 00:00:31,780 Y en guardar como, pues vamos a guardarlo como transformaciones.html, ¿vale? 5 00:00:33,969 --> 00:00:38,210 Y ahora lo que vamos a hacer es borrar todo aquello que no nos interese. 6 00:00:38,210 --> 00:00:41,789 En mi caso, pues voy a borrar todo esto, ¿vale? 7 00:00:42,729 --> 00:00:47,630 Y el elemento div, en principio, pues no lo voy a borrar porque lo voy a utilizar. 8 00:00:47,810 --> 00:00:49,649 Bueno, sí, lo voy a borrar, ¿vale? Lo borro. 9 00:00:51,289 --> 00:00:52,590 Vale, pues lo mismo. 10 00:00:52,590 --> 00:01:00,049 En primer lugar os voy a poner en comentarios aquí, ah bueno y aquí vamos a poner transformaciones CSS, ¿vale? 11 00:01:00,250 --> 00:01:06,370 En primer lugar os voy a poner aquí en comentarios cuál es la propiedad elemental para hacer transformaciones, ¿vale? 12 00:01:08,670 --> 00:01:15,349 Transformaciones. Pues esa propiedad es la propiedad bastante evidente, transform, ¿vale? 13 00:01:15,349 --> 00:01:40,099 Y dentro de esa propiedad tenemos varias opciones. Por un lugar tenemos no one, ¿vale? Que es decir, que sería por defecto, no hacer ninguna transformación. Por otro lado tenemos translate, ¿vale? Que es para desplazar un elemento dentro de la web. Y tiene tres elementos, x, y y z, es decir, donde lo queremos posicionar en el eje x, en el eje y y en el eje z, ¿vale? En cuanto a profundidad. 14 00:01:40,099 --> 00:01:45,939 El otro elemento es scale, que es para escalarlo, para aumentar el tamaño, lo mismo, ¿vale? 15 00:01:46,540 --> 00:01:47,359 Exactamente igual 16 00:01:47,359 --> 00:01:51,760 Vamos a ponerle aquí con otra variable, con otro nombre, así no nos liamos 17 00:01:51,760 --> 00:01:55,969 Por otro lado tenemos rotate, ¿vale? 18 00:01:56,069 --> 00:02:03,390 Que es para rotarlo, pues tendríamos x, y, z y el número de grados, ¿vale? 19 00:02:03,969 --> 00:02:11,199 Y por último tenemos el skew que es para segar, ¿vale? 20 00:02:11,199 --> 00:02:18,879 Ya veremos luego qué efectos produce esto, ¿vale? Y en este caso solo pondremos en el eje X y en el eje Y, ¿vale? 21 00:02:20,599 --> 00:02:26,580 Ok, pues vamos a empezar. Lo primero que vamos a hacer es irnos a la parte HTML, ¿vale? 22 00:02:26,979 --> 00:02:37,610 Nos vamos a ir a la parte HTML y vamos a poner una cabecera H1 que va a ser propiedad transform, ¿vale? 23 00:02:37,610 --> 00:02:58,830 Y vamos a ir viendo cada una por separado. En primer lugar vamos a ver la función translate, ¿vale? Es decir, para trasladar. Y para eso nos vamos a hacer un elemento div, ¿vale? Con un texto lorem ipsum. Recuerdo, poníamos lorem con la L en mayúscula y le damos al tabulador, ¿vale? Y ya nos lo rellena él automáticamente. 24 00:02:58,830 --> 00:03:05,330 A este elemento id le vamos a poner un id que va a ser trasladar, ¿vale? 25 00:03:06,050 --> 00:03:11,729 Y ahora nos venimos aquí y vamos a darle formato a ese elemento id, ¿vale? 26 00:03:12,150 --> 00:03:13,789 Le vamos a dar formato al elemento id. 27 00:03:14,469 --> 00:03:17,550 Entonces, ponemos almohadilla y ponemos trasladar. 28 00:03:18,969 --> 00:03:23,370 Y lo primero que vamos a hacer aquí es ponerle un color de fondo, ¿vale? 29 00:03:23,830 --> 00:03:24,729 Va a tirar un color. 30 00:03:24,729 --> 00:03:29,490 En mi caso le voy a poner un amarillo, ¿vale? 31 00:03:31,419 --> 00:03:37,180 Le vamos a poner una anchura que va a ser de 330 píxeles, ¿vale? 32 00:03:37,580 --> 00:03:45,520 Le vamos a poner una altura que va a ser de 200 píxeles, ¿vale? 33 00:03:47,000 --> 00:03:54,259 Le vamos a poner un borde que va a ser de un píxel sólido, ¿vale? 34 00:03:56,039 --> 00:04:02,900 Le vamos a poner un relleno que va a ser de 20 píxeles por arriba y por abajo y de 30 píxeles en los lados. 35 00:04:02,900 --> 00:04:13,759 Y le vamos a poner un margen que va a ser de 20 píxeles arriba y abajo y 200 píxeles de izquierda a derecha, ¿vale? 36 00:04:15,159 --> 00:04:20,019 Y fijaros, el modo de utilizar la función transform es muy sencillo, ¿vale? 37 00:04:20,019 --> 00:04:42,420 Simplemente ponemos aquí transform, dos puntos y ahora vamos a poner translate, ¿vale? Y ahora ponemos como queremos que sea ese desplazamiento, ¿vale? Pues yo quiero que se desplace 500 píxeles en el eje X, ¿vale? Y 180 píxeles en el eje Y, ¿vale? 38 00:04:42,420 --> 00:04:50,579 Entonces fijaros que se desplaza hacia la derecha y hacia abajo. Si yo pusiera en el eje Y el valor negativo, fijaros que se desplaza hacia arriba. 39 00:04:50,860 --> 00:04:56,519 Y lo mismo si lo hiciera en el eje X, ¿vale? Si lo pongo negativo se desplazaría hacia la izquierda, ¿vale? 40 00:04:57,459 --> 00:05:01,680 No tiene más historia, es muy sencillito de utilizar, ¿vale? 41 00:05:03,660 --> 00:05:09,160 Nos vamos a ir ahora a siguiente propiedad, que va a ser la propiedad de escalado, ¿vale? 42 00:05:09,160 --> 00:05:12,259 Que esto es para modificar el tamaño de los elementos, ¿vale? 43 00:05:12,259 --> 00:05:30,699 Entonces, vamos a hacer lo mismo, vamos a poner una cabecera de nivel 2, ¿vale? Vamos a poner un pion scale, ¿vale? En este caso vamos a poner de nuevo un dip, ¿vale? Un elemento dip. 44 00:05:30,699 --> 00:05:40,279 Dentro de ese elemento div vamos a poner un texto lore-nipsum y a ese div le vamos a poner un id que va a ser escalar. 45 00:05:41,339 --> 00:05:53,860 Y lo mismo, nos venimos a mi parte de CSS y modifico la etiqueta el id escalar. 46 00:05:53,860 --> 00:06:09,660 Y vamos a hacer como antes. Le vamos a poner en primer lugar un color de fondo que va a ser un color verde. Le vamos a poner una anchura de 440 píxeles. 47 00:06:09,660 --> 00:06:39,649 Le vamos a poner una altura de 200 píxeles, le vamos a poner un borde de un píxel sólido, le vamos a poner un relleno de 12 píxeles, vamos también a modificarle el margen y le vamos a poner 90 píxeles por todos los lados. 48 00:06:39,649 --> 00:06:58,339 Y le vamos a poner un color a la fuente en blanco, ¿vale? Para que se pueda leer. Y ya está, ¿vale? Y lo mismo, nos vamos ahora, ponemos nuestro elemento transform, la función scale, ¿vale? 49 00:06:58,339 --> 00:07:11,680 Y ahora lo que vamos a poner es poner valores enteros, ¿vale? No van a ser unidades en este caso. Si yo pongo un 1, ¿vale? Por ejemplo, en el eje X y en el eje Y un 1, fijaros que no me lo escala. 50 00:07:11,779 --> 00:07:23,339 ¿Por qué? Porque simplemente estaría multiplicando el tamaño del elemento por 1, ¿vale? Si yo ahora pongo en el eje X un 2, fijaros que lo que hace es que me multiplica por 2 el eje X. 51 00:07:23,339 --> 00:07:32,079 Si yo pongo en el eje Y un 0.85, me multiplica por 0.85 el tamaño en el eje Y, ¿vale? 52 00:07:32,079 --> 00:07:33,959 Es decir, el elemento height, ¿vale? 53 00:07:34,319 --> 00:07:37,620 Entonces, me disminuiría de tamaño, ¿vale? 54 00:07:38,360 --> 00:07:44,060 Entonces, fijaros que aquí nos permite un proceso de escalado en el que modificamos todos los elementos, 55 00:07:44,360 --> 00:07:46,060 todo lo que haya dentro de ese elemento, ¿vale? 56 00:07:46,220 --> 00:07:51,519 Fijaros que yo tengo ahí un texto dentro del elemento div que me lo está modificando automáticamente, ¿vale? 57 00:07:51,519 --> 00:08:09,500 Pues como veis, también muy sencillo utilizar la función scale, ¿vale? Vamos ahora a la siguiente función que va a ser rotate, ¿vale? Pues entonces ponemos h2, función rotate, ¿vale? 58 00:08:09,500 --> 00:08:26,439 Pues añadimos nuestro elemento div, ¿vale? Con un texto lore-nipsune-game, ¿vale? Dentro del div ponemos un id que va a ser rotar, ¿vale? ¿Ok? 59 00:08:26,439 --> 00:08:34,960 Y ahora aquí añadimos nuestra etiqueta, que va a ser Rotar, ¿vale? 60 00:08:35,399 --> 00:08:38,700 Y vamos a hacer lo que llevamos haciendo todo el rato. 61 00:08:38,899 --> 00:08:45,539 Vamos a modificar el color de fondo, Background Color. 62 00:08:45,539 --> 00:08:57,179 En este caso le voy a poner un color que va a ser una especie de turquesa, ¿vale? 63 00:08:57,700 --> 00:09:12,419 Le vamos a poner una anchura de 200 píxeles, una altura de 250 píxeles, un relleno de 12 píxeles, 64 00:09:12,419 --> 00:09:18,620 unos márgenes de 90 píxeles, ¿vale? 65 00:09:19,440 --> 00:09:24,620 Y en este caso, pues lo que vamos a hacer, como decía, es hacer una transformación 66 00:09:24,620 --> 00:09:29,980 y lo vamos a rotar 30 grados, ¿vale? 67 00:09:31,080 --> 00:09:36,220 ¿Ok? Entonces fijaros que aparece ya nuestro elemento rotado, ¿vale? 68 00:09:38,480 --> 00:09:45,259 Dependiendo de esos grados que yo ponga, me lo rotará más o menos, ¿vale? 69 00:09:47,720 --> 00:09:49,779 Ok, ¿qué más, qué más? 70 00:09:49,919 --> 00:09:53,759 Ah, nos quedaría ya la función de sesgado, ¿vale? 71 00:09:53,759 --> 00:09:59,139 Entonces ponemos una cabecera h2, función skew, ¿vale? 72 00:09:59,279 --> 00:10:00,299 Que es la de sesgar. 73 00:10:00,899 --> 00:10:04,440 Le vamos a poner un elemento div con un texto lore-nipsum. 74 00:10:04,879 --> 00:10:08,620 Y en el div le vamos a poner un id que va a ser sesgar. 75 00:10:09,159 --> 00:10:26,809 Y ahora modificamos, es etiqueta SESCAR y hacemos como siempre, vamos a ponerle un color de fondo, en este caso ponemos 2980, un azul oscuro. 76 00:10:26,809 --> 00:10:48,159 Vamos a poner una anchura de 500 píxeles, vamos a ponerle una altura de 250 píxeles, vamos a ponerle un margen de 90 píxeles, ¿vale? 77 00:10:48,159 --> 00:11:02,279 No lo vamos a poner en este caso relleno. Y ahora hacemos una transformación del elemento skew, ¿vale? Fijaros que podríamos hacerlo solo skew en el eje x o solo skew en el eje y, ¿vale? Igual que con los otros, ¿vale? 78 00:11:02,279 --> 00:11:21,279 Pero vamos a hacer una transformación del elemento skew que va a ser de 20 grados en el eje x y de 16 grados en el eje y. ¿Vale? Entonces fijaros el efecto que produce. ¿Vale? ¿Ok? 79 00:11:21,279 --> 00:11:26,879 Producéis una deformación del propio elemento, ¿vale? 80 00:11:27,379 --> 00:11:35,529 Vamos a ver también cómo utilizar varias de estas funciones a la vez, ¿vale? 81 00:11:35,870 --> 00:11:50,149 Entonces nos vamos a ir aquí abajo, vamos a meter una nueva etiqueta H2 y vamos a poner varias funciones o varias transformaciones a la vez, ¿vale? 82 00:11:50,149 --> 00:12:13,100 Y ponemos un elemento div, en este caso lo vamos a poner vacío y le vamos a poner como id varias, ¿vale? Y simplemente nos venimos a la parte de estilo, ¿vale? Y lo que vamos a hacer es añadir esa etiqueta varias, ¿vale? 83 00:12:13,100 --> 00:12:40,399 Vamos a cambiar el color de fondo, background color, y vamos a poner 221579, ¿vale? Por ejemplo, vamos a ponerle una anchura de 200 píxeles y una altura de 250 píxeles, ¿vale? 84 00:12:40,399 --> 00:12:51,000 Vamos a ponerle un relleno de 12 píxeles y un margen de 90 píxeles, ¿vale? 85 00:12:51,620 --> 00:13:03,700 Entonces, para utilizar varias transformaciones a la vez, lo que vamos a hacer es poner transform, igual que hacíamos antes, pero ponemos varias de las funciones una seguida de la otra, ¿vale? 86 00:13:03,700 --> 00:13:17,340 Por ejemplo, vamos a rotarlo 30 grados, añadimos un espacio y vamos a hacerle un secado de 20 grados y 16 grados, ¿vale? 87 00:13:17,340 --> 00:13:41,340 Entonces, fijaros, ahora lo que he hecho es no solo sesgar, sino también rotar. Incluso podría aquí añadir una traslación y lo muevo 50 píxeles a la derecha y 200 píxeles, menos 200 píxeles para que me lo lleve hacia arriba, ¿vale? 88 00:13:41,340 --> 00:14:04,120 ¿Vale? Fijaros, ¿vale? Que nos permite mucho juego en ese sentido, ¿vale? Y ahora, pues vamos a ver cómo modificar lo que es el punto origen de giro, ¿vale? 89 00:14:04,120 --> 00:14:13,779 Porque seguramente ahora vais a ver cómo el punto origen siempre para hacer los giros y para hacer todas las transformaciones siempre considera el punto medio, ¿vale? 90 00:14:13,779 --> 00:14:42,240 Entonces, vamos a modificar eso. Para eso vamos a añadir aquí una etiqueta h2 nueva que va a ser propiedad transform origin, ¿vale? Y lo que vamos a hacer es meter un nuevo div vacío con un id que va a ser punto origen o punto barra baja origen. Eso, ¿vale? 91 00:14:42,240 --> 00:14:47,240 Vamos a modificar este ID, punto barra baja origen. 92 00:14:49,659 --> 00:14:57,159 En primer lugar, lo que vamos a hacer es ponerle, como siempre, un color de fondo para que nos destaque un poquito. 93 00:14:57,360 --> 00:14:59,240 Le vamos a poner FF a 500. 94 00:15:01,259 --> 00:15:09,799 Le vamos a poner una anchura de 500 píxeles y una altura también de 500 píxeles. 95 00:15:09,799 --> 00:15:16,039 ¿Vale? Entonces veis que tenemos aquí un cuadradito de una especie de color naranja, ¿vale? 96 00:15:16,659 --> 00:15:29,919 Le vamos a poner un margen que va a ser de 30 píxeles, automático en el eje y eje zeta, eje en los laterales, perdón, y de 90 píxeles hacia abajo, ¿vale? 97 00:15:31,059 --> 00:15:38,240 Y ya está. Y ahora vamos a hacer, vamos a ponerle un hover a este punto origen, ¿vale? 98 00:15:41,879 --> 00:15:48,720 Entonces le vamos a poner transform y lo vamos a rotar 360 grados, ¿vale? 99 00:15:49,440 --> 00:15:57,620 Entonces fijaros, si yo ahora lo pongo esto tal que así, yo pongo el ratón encima, vosotros, bueno cualquiera, no somos capaces de apreciar este giro. 100 00:15:57,720 --> 00:16:03,360 ¿Por qué? Porque estamos rotando 360 grados y como es girar lo completo, pues no lo apreciamos. 101 00:16:03,799 --> 00:16:17,980 Fijaros que si yo en vez de poner 360, pongo 36, ¿vale? Fijaros que esto sí lo apreciamos, ¿vale? 102 00:16:18,039 --> 00:16:23,460 Sin embargo, si yo pongo 360, no somos capaces de apreciarlo, ¿vale? 103 00:16:23,559 --> 00:16:30,840 Entonces, para poder notarlo, lo que voy a hacer es añadir, lo que habíamos visto en el vídeo anterior, una transición, ¿vale? 104 00:16:31,399 --> 00:16:37,519 Entonces, voy a poner justo aquí debajo, transition, ¿vale? 105 00:16:38,200 --> 00:16:41,799 Para añadir transiciones, ¿vale? 106 00:16:41,799 --> 00:16:44,279 y lo que voy a poner va a ser 107 00:16:44,279 --> 00:16:45,100 que va a ser la 108 00:16:45,100 --> 00:16:48,220 voy a poner .com aquí que si no, no funciona 109 00:16:48,220 --> 00:16:51,960 ¿vale? vamos a poner 110 00:16:51,960 --> 00:16:53,940 que va a ser la propiedad transform 111 00:16:53,940 --> 00:16:56,100 ¿vale? que va a durar 112 00:16:56,100 --> 00:16:57,620 3 segundos en 113 00:16:57,620 --> 00:16:59,899 easying y que va a tener un delay 114 00:16:59,899 --> 00:17:01,659 de 0,5 segundos 115 00:17:01,659 --> 00:17:04,200 ¿vale? entonces fijaros que si yo 116 00:17:04,200 --> 00:17:05,799 ahora pongo el ratón encima 117 00:17:05,799 --> 00:17:09,900 el cuadrado gira ¿vale? 118 00:17:11,220 --> 00:17:11,779 tal 119 00:17:11,779 --> 00:17:12,319 y 120 00:17:12,319 --> 00:17:15,460 como era lo esperado 121 00:17:15,460 --> 00:17:35,450 ¿Vale? Ahora, vamos a hacer una cosita. Voy a copiarme esta propiedad tal y como está, me la voy a copiar aquí, ¿vale? Para que ahora cuando yo esto gire, si yo suelto el ratón, vuelva a su punto original, ¿vale? 122 00:17:35,450 --> 00:17:41,609 Pero fijaros que todos estos giros los está haciendo siempre considerando como origen el centro del cuadrado. 123 00:17:41,730 --> 00:17:47,430 Si yo quiero que considere como origen, por ejemplo, la esquina superior derecha, ¿vale? 124 00:17:47,670 --> 00:17:58,869 Lo que yo voy a hacer es, justo aquí, en este elemento, debajo de transition, por ejemplo, voy a poner una propiedad que va a ser transform origin, ¿vale? 125 00:17:58,869 --> 00:18:07,130 Y en vez de mantener center, pues voy a utilizar, por ejemplo, right top, ¿vale? 126 00:18:07,150 --> 00:18:08,890 Para que me coja la esquina superior derecha. 127 00:18:09,029 --> 00:18:10,130 Y fijaros ahora qué pasa. 128 00:18:13,349 --> 00:18:19,589 Ese efecto de giro lo hace considerando como origen la esquina superior derecha, ¿vale? 129 00:18:19,829 --> 00:18:20,910 Y lo mismo para volver. 130 00:18:22,829 --> 00:18:23,049 ¿Vale? 131 00:18:25,660 --> 00:18:29,240 Esto es para poder jugar con diferentes efectos y diferentes transiciones, ¿vale? 132 00:18:29,240 --> 00:18:35,819 Espero que os haya gustado y lo hayáis visto útil, ¿vale? 133 00:18:36,380 --> 00:18:38,759 Ya nos queda un último vídeo para terminar.