CSS avanzado: 12 trucos

La propiedad rotate puede llegar a ser realmente útil

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Te mostraré cómo utilizar esta propiedad para generar esos truquillos ópticos que conseguirán que quieras más a tu diseñador y sus triángulos. Veremos cómo utilizar esta propiedad para generar código HTML más limpio sin necesidad de crear elementos no necesarios y tener un código más eficiente.

Transcripción

En este vídeo vamos a aprender a utilizar la propiedad 'rotate'. Te mostraré cómo utilizar esta propiedad para generar esos truquillos ópticos que conseguirán que quieras más a tu diseñador y a sus triángulos. Veremos cómo utilizar esta propiedad para generar código HTML más limpio, sin necesidad de crear elementos innecesarios y tener un código más eficiente. En este caso, por ejemplo, lo que vamos a hacer es: dado... estos elementos que tenemos aquí son nuestras opciones de páginas, lo que vamos a hacer es que cuando yo ponga el ratón encima, se me va a girar entero cuando yo haga 'hover'. Así que nos vamos a nuestro código HTML, cogemos nuestras imágenes. En este caso las tenemos aquí, es decir, que accedemos a ellas mediante CSS, y le decimos que cuando yo haga 'hover' sobre mi imagen, quiero que me hagas un 'rotate' de 90 grados. Vamos a salvar, nos vamos a nuestro navegador. Cuando yo pongo el ratón encima, si os fijáis, se están girando. En este caso lo que nos interesa es que haga un giro. Podemos hacer que haga un giro entero. Lo único, tener en cuenta que 360 grados es el giro entero, pero no lo vamos a ver. ¿Por qué? Porque lo está haciendo muy rápido. Así que lo que vamos a hacer es decirle que nos haga ese efecto, pero más suavemente. Vamos a ver... Vamos a probar primero con tres milisegundos. ¿Habéis visto? Puede llegar a ser demasiado rápido, así que lo que le podemos decir es que tarde más en realizar el efecto. Ahí tenemos. Incluso podemos decirle que tarde hasta un segundo, para que de esa sensación. Bastante mejor. Ahí tenemos nuestros 360 grados y el movimiento de nuestros elementos. Con 'rotate' podemos conseguir este tipo de cosas. También, como os comentaba, el 'rotate' puede servirnos de cara a efectos ópticos de poder posicionar elementos HTML tal como nosotros queramos. ¿Esto qué significa? Significa que podemos utilizar el 'rotate', por ejemplo, si queremos crear un triángulo, haremos un cuadrado, lo giraremos con 'rotate' a 45 grados y ya tendremos un rombo. Si lo posicionamos a la derecha y arriba de nuestro elemento HTML, podremos generar un triángulo.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.