Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Construya una Increíble Presentación de Diapositivas 3D solo con CSS

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

En este tutorial, voy a mostrarle cómo crear una presentación de diapositivas 3D usando sólo HTML y CSS. ¡No es necesario JavaScript! ¡Lance Safari y vamos a empezar!


Teoría

Antes de sumergirnos en la construcción de nuestra presentación de diapositivas, es importante entender nuestro enfoque. Vamos a utilizar las nuevas transformaciones 3D que forman parte de la especificación CSS3. Probablemente ha visto otros tutoriales sobre cómo usar estas transformaciones para crear objetos y animarlos en un espacio 3D. Por lo general, al crear una presentación de diapositivas, confiamos en JavaScript para activar esas transformaciones. JavaScript detectará un evento de clic y actualizará uno de nuestros elementos HTML (normalmente añadiendo una clase). El elemento actualizado recibiría entonces nuevos estilos CSS.

Lo que es diferente en este tutorial es que evitaremos JavaScript usando sólo CSS para activar eventos de clics y actualizar los estilos de nuestro elemento. La reciente Sugerencia Rápida de Jeffrey Way, Imite un Evento de Clic con CSS, describe una manera de hacerlo usando la pseudoclase :target. Aquí, utilizaremos la pseudoclase :focus y el elemento HTML5 <figcaption>, pero la idea es la misma.

Este método no es necesariamente "mejor" que usar JavaScript, sino simplemente una alternativa elegante que toma ventaja de los elementos HTML5 más recientes.


Paso 0: Empezando

Comencemos creando un index.html y style.css. También crearemos una carpeta images.

Nuestro objeto 3D será una caja rectangular con cuatro caras de 940px por 400px y dos caras de 400px por 400px. He incluido seis imágenes en los archivos de origen. Coloque estas, o sus propias versiones, en la carpeta 'images'.


Paso 1: El HTML

A continuación se muestra nuestro HTML base. Estaremos envolviendo todo en un container y nuestra presentación de diapositivas, naturalmente, estará ubicada dentro de un elemento div llamado slideshow.

Dentro de slideshow, añada el siguiente código para nuestras seis imágenes:

Tenga en cuenta que nuestras imágenes (las seis caras de nuestro objeto 3D) están envueltas en una etiqueta <figure>con el ID de box. Este elemento es el que vamos a rotar al animar nuestra presentación de diapositivas.

El Truco

Ahora viene el truco que nos permite usar sólo CSS para detectar eventos de clic. Vamos a envolver box con otros seis elementos <figure>. Cada uno representará una rotación diferente de nuestro objeto 3D. El atributo tabindex permite que estos elementos reciban la pseudoclase :focus.

Cada <figure> necesitará también un elemento <figcaption> dentro del mismo. Estos servirán como nuestros botones. Cuando se hace clic en ellos activarán el <figure> padre para recibir :focus. Eso nos permitirá utilizar seis diferentes transformaciones CSS en box.

Podría sonar un poco complicado en este momento, pero tendrá sentido una vez que lleguemos al CSS. Por ahora, solo envuelva a box con seis elementos <figure> y dé a cada uno un tabindex y un ID. A continuación, incluya un <figcaption> para cada <figure>

HTML Final

El marcado final en index.html debería tener el siguiente aspecto:


Paso 2: CSS Básico

En primer lugar, vamos a abrir style.css y pegar algunos códigos de restablecimiento, sólo por precaución. (Eliminar cualquier esquema que :focus podría causar es importante.)

A continuación, le daremos a nuestra página un buen fondo de degradado:

El código de background-image incluye los prefijos de Mozilla y WebKit. En caso de que desee que una versión de la presentación de diapositivas funcione con Internet Explorer, el filter y -ms-filter crearán un degradado en IE6, 7 y 8. (He generado este código en el sitio útil www.css3please.com).

Ahora, vamos a agregar algún código para nuestros container, slideshow y box:

Nuestro container tendrá un ancho de 960px y estará centrado con margin: 0 auto. el div slideshow será de 900px de ancho, centrado y empujado hacia abajo 50px desde la parte superior de la página. También le estamos dando 50px de relleno en la parte superior. Esta área de relleno contendrá nuestros botones de presentación, los elementos <figcaption>, una vez que los posicionemos.

El elemento que en realidad contiene nuestra presentación de diapositivas, box, se establece en el mismo tamaño que nuestras imágenes. También es importante establecer position a relative, ya que estaremos posicionando absolutamente a algunos de sus hijos. Nuestros otros <figure> están configurados con display: inline, pero box debe ser un elemento de bloque.

Ahora, defina los siguientes estilos para nuestras seis imágenes:

Posicionamos nuestras imágenes de manera absoluta así se apilan directamente una encima de otra en la esquina superior izquierda de box. (De forma predeterminada, top y left se establecen en 0. Se han incluido por motivos de claridad.)

En este momento, nuestra presentación de diapositivas se ve así:

Vamos a añadir un poco de estilo para nuestros botones <figcaption>

La primera sección de estos estilos es puramente estética. Hace los botones semitransparentes y redondeados y el texto centrado y sombreado. También cambia el cursor del ratón a un puntero, para que los usuarios sepan que pueden hacer clic.

La segunda sección posiciona nuestros botones por encima de las imágenes, las centra y las separa entre sí.

Asegúrese de posicionar los botones fuera de los límites de los seis elementos <figure>. De lo contrario, al hacer clic en el botón se registrará como un clic en la <figure> más interna en lugar de la correspondiente a ese botón.

El último pedazo de código añade transiciones. Esto se debe a que estamos a punto de agregar estilos al estado hover de los <figcaption> :

Nuestros botones con estilo deben tener este aspecto:


Paso 3: La Caja 3D

Lo primero que tenemos que hacer es decirle al navegador que estaremos trabajando en un espacio 3D. Hacemos esto usando la propiedad perspective en un elemento padre. Vamos a aplicarlo (con el prefijo de WebKit) a slideshow:

El valor de perspective determina a cuántos píxeles está el "espectador" del objeto 3D. Cuanto menor sea el valor, más exagerado será el efecto 3D.

También necesitamos preservar el espacio 3D en todos nuestros elementos hijo. Para ello agregaremos la propiedad transform-style: preserve-3d a todas nuestras <figure>. (De nuevo, usaremos el prefijo de WebKit.)

Muy bien, ahora es el momento de transformar las caras individuales (nuestras seis imágenes) para construir una caja en 3D. Vamos a apuntar cada imagen usando la pseudoclase nth-child(), pero dándole a cada <img> un ID específico también funcionaría. Asegúrese de agregar este código debajo de los estilos actuales en la hoja de estilo.

Aquí está el código, lo explicaré a continuación:

Bueno, aquí está lo que está pasando: La primera imagen no se gira en absoluto, pero se traslada hacia adelante (hacia el espectador) 200 píxeles en su eje Z.

La segunda imagen se gira alrededor de su eje X en 180 grados de modo que esté orientada hacia fuera del espectador. A continuación, se aleja del espectador 200 píxeles en su eje Z.

Observe que el orden de transformaciones importa -- la rotación cambia el origen del objeto y entonces el traslado ocurre a lo largo de un nuevo eje.

Nuestras imágenes tercera y cuarta se giran cada una alrededor del eje X para mostrarse hacia arriba y hacia abajo, respectivamente. Luego ambas se trasladan 200 pixeles a lo largo de sus nuevos ejes Z.

Recuerde, nuestra caja es de 900px de ancho por 400px de alto por 400px de profundidad. Los cuatro lados (las caras 940px por 400px) deben estar a 400 píxeles de distancia uno del otro. Es por eso que los trasladamos todos 200 píxeles en direcciones opuestas. Los dos extremos (las caras de 400px por 400px) se trasladaran 900 píxeles de distancia entre sí.

La quinta y sexta imágenes están actualmente en el lado izquierdo de box y no están centradas. Debido a esto, nuestra quinta y sexta imágenes reciben diferentes traslados. Ambas tienen su origen 200 píxeles a la derecha del extremo izquierdo de box. La quinta imagen debe girarse -90 grados alrededor del eje Y para hacer frente a la izquierda y luego ser trasladada 200 píxeles a lo largo de su nuevo eje Z. Esto lo coloca en el extremo izquierdo de nuestro objeto 3D. La sexta imagen se gira 90 grados alrededor del eje Y para mirar a la derecha y luego se traslada 700 píxeles a lo largo de su nuevo eje Z. Esto la coloca en el extremo derecho de nuestro objeto 3D.

La mejor manera de tener una idea de lo que hemos hecho es mirar el arreglo actual de las imágenes. Si visualiza la presentación de diapositivas en Safari, verá esto:

Vamos a esconder la cara frontal - sólo para que podamos ver si nuestras otras imágenes están posicionadas correctamente:

Ahora podemos ver el interior de nuestra caja:

Ahora, remueva display:none de nuestra primera imagen. Es posible que haya notado que la caja es más grande en la pantalla -- más cerca del espectador -- de lo que debería ser. La cara frontal parece especialmente grande y estirada.

Para corregir esto necesitamos mover todo el objeto 3D lejos del espectador en 200 píxeles. Añada -webkit-transform: translateZ(-200px) a los estilos de box. Mientras estamos en ello, también debemos agregar la propiedad de transición:

Con todo eso configurado, estamos listos para animar nuestra caja.


Paso 4: Animación

Pegue nuestro bloque final de estilo. Esto agregará nuestras animaciones. Voy a explicar con más detalle a continuación.

Cuando cada uno de nuestros elementos <figure> recibe la pseudoclase :focus giramos box para mostrar el lado correcto.  Observe que las rotaciones de box son todas opuestas a las rotaciones que usamos en cada cara individual. Por ejemplo, la cuarta imagen se giró 90 grados negativos alrededor del eje X. Para ponerlo en la vista debemos girar el objeto 3D entero positivo 90 grados alrededor del eje X. Los traslados aseguran que el lado del objeto 3D que estamos viendo esté siempre a la distancia correcta.

¡Eso es! Eche un vistazo a la presentación de diapositivas en Safari para asegurarse de que todo esté funcionando.

CSS Final

El estilo final en style.css debería verse así:


Pensamientos Finales

Probablemente no hay manera de justificar el uso de un montón de elementos <figure> y elementos <figcaption> anidados como botones bajo las recomendaciones CSS3 actuales. Tampoco este experimento respeta la distinción de HTML para el contenido, CSS para el estilo, y JS para el comportamiento. Y dado que estas transformaciones sólo funcionan actualmente en Safari, esta presentación de diapositivas no está preparada para ser utilizada en proyectos de cliente. Pero el propósito de este experimento es mostrar y empujar los límites de las nuevas características HTML5 y CSS3.

Si está interesado en adaptar esta presentación de diapositivas para navegadores con menos soporte, he aquí algunos consejos útiles:

  • Utilice Modernizr. ¡Seriamente!
  • Sólo Safari admite las transformaciones en 3D, pero puede crear una presentación de diapositivas ingeniosa con transformaciones 2D y admitir una gama mucho más amplia de navegadores.
  • La propiedad opacity haría una gran presentación de diapositivas que se desvanecen y funcionaría en casi todos los navegadores. (Usted necesitaría filter para IE).
  • Los botones <figcaption> se romperán en Firefox si están absolutamente posicionados. Es raro, lo sé. Sólo asegúrese de utilizar el posicionamiento relativo.

Espero que hayan disfrutado este tutorial. ¡Espero sus comentarios y muchas gracias por leer!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.