CSS avanzado: 12 trucos

La propiedad perspective y su prometedor futuro con CSS

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En este vídeo tutorial vamos a ver cómo hacer efectos en 3D sin volverse loco. Os mostraré cómo manejar los ejes de posición x, y y z para poder crear efectos muy interesantes mediante CSS para nuestro HTML.

Transcripción

En este vídeo vamos a aprender cómo funciona la propiedad 'perspective'. Esta tiene que ir de la mano con 'rotate', y os explico por qué. Tenemos aquí nuestro diseño. Imaginaros que lo que queremos es que estas frases aparezcan como las frases del principio de Star Wars, que aparecen desde abajo y que da la sensación que se funden hacia dentro. Lo que vamos a hacer es irnos a nuestro HTML. El bloque es 'who', con lo cual le decimos que la propiedad 'perspective' es de 1000 píxeles. Salvamos, nos vamos a nuestro navegador y como veréis, no pasa nada, pero, sin embargo, ya le estamos dotando de perspectiva. Ahora viene la razón por la que os he dicho que hay que utilizar también el 'rotate'. Lo que a mí me interesa es que los párrafos que hay dentro sean los que tienen esa perspectiva. Así que lo que vamos a hacer es utilizar el 'rotate', en este caso del eje X, y le vamos a dar 60 grados. Si salvamos y nos vamos a nuestro navegador, ahí tenéis. ¿Qué es lo que estoy haciendo? Tenéis que tener en cuenta que cuando utilizamos 'perspectiva', al final lo que hacemos es utilizar como dos planos, en 2D. Si no sería 'perspective 3D'. Al utilizar dos planos, tenemos por un lado el eje frontal, que sería el de las X, y por otro lado el eje que sería hacia dentro o hacia fuera, y lo que hacemos es girar ese eje. Para que veáis bien lo que os estoy diciendo –¿vale?– imaginaos que en vez de la X, utilizamos la Y. Salvamos, nos vamos a nuestro navegador, actualizamos. ¿Veis? Al final, lo que yo estoy haciendo es que mis párrafos están dentro de una capa sobre la la capa 'who' y lo que hago es girar este eje. Si yo aquí le doy valor negativo, se me gira hacia el otro lado. Si hago lo mismo en la de las X, la sensación es que sale hacia arriba. Si yo le quito el valor negativo, va hacia dentro. Y si quito mi perspectiva y salvo, como podéis ver, solo se está girando, ¿de acuerdo? Así que es muy importante cuando utilizamos la propiedad 'perspective', utilizar el 'rotate' aplicado a los elementos interiores que queremos hacer que tengan esa sensación de perspectiva.

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.