Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Transformaciones - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 5 de abril de 2021 por Fernando M.

99 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
Para ello vamos a partir del archivo anterior que habíamos visto, el archivo de transiciones, ¿vale? Que estáis viendo aquí. 00:00:10
Pues entonces lo que vamos a hacer simplemente es darle archivo y luego a guardar como, ¿vale? 00:00:17
Y en guardar como, pues vamos a guardarlo como transformaciones.html, ¿vale? 00:00:24
Y ahora lo que vamos a hacer es borrar todo aquello que no nos interese. 00:00:33
En mi caso, pues voy a borrar todo esto, ¿vale? 00:00:38
Y el elemento div, en principio, pues no lo voy a borrar porque lo voy a utilizar. 00:00:42
Bueno, sí, lo voy a borrar, ¿vale? Lo borro. 00:00:47
Vale, pues lo mismo. 00:00:51
En primer lugar os voy a poner en comentarios aquí, ah bueno y aquí vamos a poner transformaciones CSS, ¿vale? 00:00:52
En primer lugar os voy a poner aquí en comentarios cuál es la propiedad elemental para hacer transformaciones, ¿vale? 00:01:00
Transformaciones. Pues esa propiedad es la propiedad bastante evidente, transform, ¿vale? 00:01:08
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. 00:01:15
El otro elemento es scale, que es para escalarlo, para aumentar el tamaño, lo mismo, ¿vale? 00:01:40
Exactamente igual 00:01:46
Vamos a ponerle aquí con otra variable, con otro nombre, así no nos liamos 00:01:47
Por otro lado tenemos rotate, ¿vale? 00:01:51
Que es para rotarlo, pues tendríamos x, y, z y el número de grados, ¿vale? 00:01:56
Y por último tenemos el skew que es para segar, ¿vale? 00:02:03
Ya veremos luego qué efectos produce esto, ¿vale? Y en este caso solo pondremos en el eje X y en el eje Y, ¿vale? 00:02:11
Ok, pues vamos a empezar. Lo primero que vamos a hacer es irnos a la parte HTML, ¿vale? 00:02:20
Nos vamos a ir a la parte HTML y vamos a poner una cabecera H1 que va a ser propiedad transform, ¿vale? 00:02:26
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. 00:02:37
A este elemento id le vamos a poner un id que va a ser trasladar, ¿vale? 00:02:58
Y ahora nos venimos aquí y vamos a darle formato a ese elemento id, ¿vale? 00:03:06
Le vamos a dar formato al elemento id. 00:03:12
Entonces, ponemos almohadilla y ponemos trasladar. 00:03:14
Y lo primero que vamos a hacer aquí es ponerle un color de fondo, ¿vale? 00:03:18
Va a tirar un color. 00:03:23
En mi caso le voy a poner un amarillo, ¿vale? 00:03:24
Le vamos a poner una anchura que va a ser de 330 píxeles, ¿vale? 00:03:31
Le vamos a poner una altura que va a ser de 200 píxeles, ¿vale? 00:03:37
Le vamos a poner un borde que va a ser de un píxel sólido, ¿vale? 00:03:47
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. 00:03:56
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? 00:04:02
Y fijaros, el modo de utilizar la función transform es muy sencillo, ¿vale? 00:04:15
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? 00:04:20
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. 00:04:42
Y lo mismo si lo hiciera en el eje X, ¿vale? Si lo pongo negativo se desplazaría hacia la izquierda, ¿vale? 00:04:50
No tiene más historia, es muy sencillito de utilizar, ¿vale? 00:04:57
Nos vamos a ir ahora a siguiente propiedad, que va a ser la propiedad de escalado, ¿vale? 00:05:03
Que esto es para modificar el tamaño de los elementos, ¿vale? 00:05:09
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. 00:05:12
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. 00:05:30
Y lo mismo, nos venimos a mi parte de CSS y modifico la etiqueta el id escalar. 00:05:41
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. 00:05:53
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. 00:06:09
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? 00:06:39
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. 00:06:58
¿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. 00:07:11
Si yo pongo en el eje Y un 0.85, me multiplica por 0.85 el tamaño en el eje Y, ¿vale? 00:07:23
Es decir, el elemento height, ¿vale? 00:07:32
Entonces, me disminuiría de tamaño, ¿vale? 00:07:34
Entonces, fijaros que aquí nos permite un proceso de escalado en el que modificamos todos los elementos, 00:07:38
todo lo que haya dentro de ese elemento, ¿vale? 00:07:44
Fijaros que yo tengo ahí un texto dentro del elemento div que me lo está modificando automáticamente, ¿vale? 00:07:46
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? 00:07:51
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? 00:08:09
Y ahora aquí añadimos nuestra etiqueta, que va a ser Rotar, ¿vale? 00:08:26
Y vamos a hacer lo que llevamos haciendo todo el rato. 00:08:35
Vamos a modificar el color de fondo, Background Color. 00:08:38
En este caso le voy a poner un color que va a ser una especie de turquesa, ¿vale? 00:08:45
Le vamos a poner una anchura de 200 píxeles, una altura de 250 píxeles, un relleno de 12 píxeles, 00:08:57
unos márgenes de 90 píxeles, ¿vale? 00:09:12
Y en este caso, pues lo que vamos a hacer, como decía, es hacer una transformación 00:09:19
y lo vamos a rotar 30 grados, ¿vale? 00:09:24
¿Ok? Entonces fijaros que aparece ya nuestro elemento rotado, ¿vale? 00:09:31
Dependiendo de esos grados que yo ponga, me lo rotará más o menos, ¿vale? 00:09:38
Ok, ¿qué más, qué más? 00:09:47
Ah, nos quedaría ya la función de sesgado, ¿vale? 00:09:49
Entonces ponemos una cabecera h2, función skew, ¿vale? 00:09:53
Que es la de sesgar. 00:09:59
Le vamos a poner un elemento div con un texto lore-nipsum. 00:10:00
Y en el div le vamos a poner un id que va a ser sesgar. 00:10:04
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. 00:10:09
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? 00:10:26
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? 00:10:48
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? 00:11:02
Producéis una deformación del propio elemento, ¿vale? 00:11:21
Vamos a ver también cómo utilizar varias de estas funciones a la vez, ¿vale? 00:11:27
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? 00:11:35
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? 00:11:50
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? 00:12:13
Vamos a ponerle un relleno de 12 píxeles y un margen de 90 píxeles, ¿vale? 00:12:40
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? 00:12:51
Por ejemplo, vamos a rotarlo 30 grados, añadimos un espacio y vamos a hacerle un secado de 20 grados y 16 grados, ¿vale? 00:13:03
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? 00:13:17
¿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? 00:13:41
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? 00:14:04
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? 00:14:13
Vamos a modificar este ID, punto barra baja origen. 00:14:42
En primer lugar, lo que vamos a hacer es ponerle, como siempre, un color de fondo para que nos destaque un poquito. 00:14:49
Le vamos a poner FF a 500. 00:14:57
Le vamos a poner una anchura de 500 píxeles y una altura también de 500 píxeles. 00:15:01
¿Vale? Entonces veis que tenemos aquí un cuadradito de una especie de color naranja, ¿vale? 00:15:09
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? 00:15:16
Y ya está. Y ahora vamos a hacer, vamos a ponerle un hover a este punto origen, ¿vale? 00:15:31
Entonces le vamos a poner transform y lo vamos a rotar 360 grados, ¿vale? 00:15:41
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. 00:15:49
¿Por qué? Porque estamos rotando 360 grados y como es girar lo completo, pues no lo apreciamos. 00:15:57
Fijaros que si yo en vez de poner 360, pongo 36, ¿vale? Fijaros que esto sí lo apreciamos, ¿vale? 00:16:03
Sin embargo, si yo pongo 360, no somos capaces de apreciarlo, ¿vale? 00:16:18
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? 00:16:23
Entonces, voy a poner justo aquí debajo, transition, ¿vale? 00:16:31
Para añadir transiciones, ¿vale? 00:16:38
y lo que voy a poner va a ser 00:16:41
que va a ser la 00:16:44
voy a poner .com aquí que si no, no funciona 00:16:45
¿vale? vamos a poner 00:16:48
que va a ser la propiedad transform 00:16:51
¿vale? que va a durar 00:16:53
3 segundos en 00:16:56
easying y que va a tener un delay 00:16:57
de 0,5 segundos 00:16:59
¿vale? entonces fijaros que si yo 00:17:01
ahora pongo el ratón encima 00:17:04
el cuadrado gira ¿vale? 00:17:05
tal 00:17:11
como era lo esperado 00:17:12
¿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? 00:17:15
Pero fijaros que todos estos giros los está haciendo siempre considerando como origen el centro del cuadrado. 00:17:35
Si yo quiero que considere como origen, por ejemplo, la esquina superior derecha, ¿vale? 00:17:41
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? 00:17:47
Y en vez de mantener center, pues voy a utilizar, por ejemplo, right top, ¿vale? 00:17:58
Para que me coja la esquina superior derecha. 00:18:07
Y fijaros ahora qué pasa. 00:18:09
Ese efecto de giro lo hace considerando como origen la esquina superior derecha, ¿vale? 00:18:13
Y lo mismo para volver. 00:18:19
¿Vale? 00:18:22
Esto es para poder jugar con diferentes efectos y diferentes transiciones, ¿vale? 00:18:25
Espero que os haya gustado y lo hayáis visto útil, ¿vale? 00:18:29
Ya nos queda un último vídeo para terminar. 00:18:36
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
99
Fecha:
5 de abril de 2021 - 17:23
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
18′ 40″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
69.27 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid