En este tutorial, te mostraré cómo crear una presentación de diapositivas en 3D utilizando solo HTML y CSS. No requiere JavaScript! Arranca Safari y comencemos!
Teoría
Antes de sumergirnos en la construcción de nuestra presentación de diapositivas, es importante comprender nuestro enfoque. Usaremos las nuevas transformaciones 3D que forman parte de la especificación CSS3. Probablemente haya visto otros tutoriales sobre cómo usar estas transformaciones para crear objetos y animarlos en un espacio 3D. Generalmente cuando creamos una presentación de diapositivas, confiamos en JavaScript para desencadenar esas transformaciones. JavaScript detectaría un evento de clic y actualizaría uno de nuestros elementos HTML (normalmente agregando una clase). El elemento actualizado recibiría nuevos estilos CSS.
Lo diferente de este tutorial es que omitiremos JavaScript utilizando solo CSS para activar eventos de clic y actualizar los estilos de nuestro elemento. El reciente Consejo Rápido de Jeffrey Way, Mimic a Click Event con CSS, describe una forma de hacerlo usando el :objetivo pseudoclase Aquí, usaremos el :atención pseudoclase y el elemento HTML5 , Pero la idea es la misma.
Este método no es necesariamente "mejor" que usar JavaScript, sino simplemente una buena alternativa que aprovecha las ventajas de los elementos HTML5 más nuevos.
Paso 0: Comenzando
Empecemos por crear un index.html y style.css. También crearemos un imagenes carpeta.
Nuestro objeto 3D será una caja rectangular con cuatro. 940px por 400px caras y dos 400px por 400px caras. He incluido seis imágenes en los archivos de origen. Coloque estos o sus propias versiones en la carpeta 'imágenes'.
Paso 1: El HTML
A continuación se muestra nuestra base de HTML. Estaremos envolviendo todo con un envase y nuestra presentación, naturalmente, estará ubicada dentro de un elemento div llamado diapositivas.
CSS 3D Slideshow
Dentro diapositivas Agregue 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 un con el CARNÉ DE IDENTIDAD de caja. Este es el elemento que rotaremos cuando animemos nuestra presentación de diapositivas..
El truco
Ahora viene el truco que nos permite usar solo CSS para detectar eventos de clics. Vamos a envolver caja con otros seis elementos. Cada uno representará una rotación diferente de nuestro objeto 3D. El atributo tabindex Permite que estos elementos reciban la pseudoclase. :atención.
Cada también necesitará un Elemento en su interior. Estas leyendas servirán como nuestros botones. Cuando se hace clic en ellos se activará el padre para recibir :atención. Eso nos permitirá usar seis transformaciones CSS diferentes en caja.
Puede que suene un poco complicado ahora, pero tendrá sentido una vez que lleguemos al CSS. Por ahora, solo envolver caja con seis elementos y dar a cada uno un único tabindex y CARNÉ DE IDENTIDAD. Luego incluye un para cada .
HTML final
El marcado final en index.html debería verse así:
CSS 3D Slideshow
Lado 1Lado 2Lado 3Lado 4Lado 5Lado 6
Paso 2: CSS básico
Primero, abramos style.css y pegue un código de reinicio, solo por si acaso. (Eliminando cualquier esquema que :atención La causa podría ser importante.
/ * RESET * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, siglas, dirección, big, cite, code , del, dfn, em, fuente, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol , ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td margen: 0; relleno: 0; borde: 0; esquema: 0; tamaño de letra: 100%; alineación vertical: línea de base; fondo: transparente; body line-height: 1; ol, ul estilo de lista: ninguno; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus outline: 0; / * Etiquetas HTML5 * / header, section, footer, margin, nav, artículo pantalla: bloque;
A continuación, le daremos a nuestra página un buen fondo degradado:
html ancho: 100%; altura: 100%; color de fondo: #FFFFFF; imagen de fondo: -moz-linear-gradient (arriba, #FFFFFF, # b3b3b3); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0, #FFFFFF), stop de color (1, # b3b3b3)); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# FFFFFF', EndColorStr = "# b3b3b3"); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorStr = '# FFFFFF', EndColorStr =" # b3b3b3 ")";
los imagen de fondo El código incluye los prefijos de venta de Mozilla y WebKit. En caso de que quiera una versión de la presentación de diapositivas para trabajar con Internet Explorer, filtrar y -ms-filtro creará un gradiente en IE6, 7 y 8. (Generé este código en el sitio útil www.css3please.com).
Ahora, vamos a agregar un código para nuestra envase, diapositivas, y caja:
Nuestro envase tendrá un ancho de 960px y estar centrado con margen: 0 auto. los diapositivas div será 900px ancho, centrado, y empujado hacia abajo 50px desde la parte superior de la página. Tambien lo estamos dando 50px de relleno en la parte superior. Esta área de relleno contendrá nuestros botones de presentación de diapositivas, Elementos, una vez que los posicionamos..
El elemento que realmente contiene nuestra presentación de diapositivas., caja, Se establece en el mismo tamaño que nuestras imágenes. También es importante establecer posición a relativo Como estaremos posicionando absolutamente algunos de sus hijos. Nuestro otro s están configurados para pantalla: en línea, pero caja debe ser un elemento de bloque.
Ahora, establece los siguientes estilos para nuestras seis imágenes:
Ubicamos nuestras imágenes absolutamente para que todas se apilen directamente una encima de la otra en la esquina superior izquierda de caja. (Por defecto, parte superior y izquierda están configurados para 0. Se ha incluido para mayor claridad.)
En este momento, nuestra presentación se ve así:
Vamos a añadir un poco de estilo para nuestro botones:
figcaption display: inline-block; ancho: 70px; altura: 35px; fondo: rgba (0,0,0,0.6); borde: 1px rgba sólido (0,0,0,0.7); -moz-border-radius: 20px; -webkit-border-radius: 20px; radio del borde: 20px; text-align: center; línea de altura: 35px; color: #ffffff; text-shadow: 1px 1px 1px # 000000; cursor: puntero; posición: relativa; arriba: -50px; izquierda: 150px; margen: 0 30px 0 0; -moz-transición: todos los 0.1s lineales; -o-transición: todos los 0.1s lineales; -webkit-transición: todos los 0.1s lineales; transición: todos los 0.1s lineales;
los primero La sección de estos estilos es puramente estética. Hace que los botones sean semitransparentes y redondeados y el texto centrado y sombreado. También cambia el cursor del mouse a un puntero, para que los usuarios sepan que pueden hacer clic..
los segundo La sección coloca nuestros botones encima de las imágenes, los centra y los espacia..
Asegúrate de colocar los botones fuera de los límites de los seis elementos. De lo contrario, al hacer clic en el botón se registrará como un clic en el botón en lugar de la correspondiente a ese botón.
los último bit de código añade transiciones. Eso es porque estamos a punto de añadir estilo a la estado de hover
figcaption: hover background: rgba (0,0,0,0.8);
Nuestros botones de estilo deben tener este aspecto:
Paso 3: La caja 3D
Lo primero que debemos hacer es decirle al navegador que estaremos trabajando en un espacio 3D. Hacemos esto usando el perspectiva propiedad en un elemento padre. Apliquémoslo (con el prefijo de vendedor de WebKit) a diapositivas:
#slideshow width: 900px; margen: 50px auto 0 auto; relleno: 50px 0 0 0; -webkit-perspectiva: 800; / * desencadena un espacio 3D * /
El valor de la perspectiva determina cuántos píxeles tiene el "espectador" del objeto 3D. Cuanto menor sea el valor, más exagerado será el efecto 3D..
También debemos preservar el espacio 3D en todos nuestros elementos secundarios. Para ello añadiremos la propiedad. estilo de transformación: preservar-3d a todos nuestros s. (Una vez más, usaremos el prefijo de vendedor WebKit).
figura pantalla: en línea; -webkit-transform-style: preserve-3d; / * mantiene el espacio 3D * /
Bien, ahora es el momento de transformar las caras individuales (nuestras seis imágenes) para construir una caja 3D. Nos enfocaremos en cada imagen usando el nth-child () pseudoclase, pero dando a cada uno especifico CARNÉ DE IDENTIDAD También funcionaría. Asegúrese de agregar este código debajo de los estilos actuales en la hoja de estilo.
Bien, esto es lo que está pasando: la primera imagen no se gira en absoluto, sino que se traduce hacia adelante (hacia el espectador) 200 píxeles en su eje Z.
La segunda imagen es rotada. alrededor sus Eje x por 180 grados De modo que quede alejado del espectador. Luego se aleja del espectador. 200 píxeles en sus Eje Z.
Observe que el orden de las transformaciones es importante: la rotación cambia el origen del objeto y luego la traducción se realiza a lo largo de un nuevo eje.
Nuestras tercera y cuarta imágenes están rotadas alrededor del Eje x cara arriba y abajo, respectivamente. Luego ambos son traducidos. 200 píxeles a lo largo de su nuevo Ejes z.
Recuerda, nuestra caja es 900px de ancho por 400px alto por 400px profundo. Los cuatro lados (el 940px por 400px caras) debe ser 400 píxeles alejados el uno del otro. Por eso los traducimos todos. 200 Píxeles en direcciones opuestas. Los dos extremos (el 400px por 400px caras) traduciremos 900 píxeles alejados el uno del otro.
Las imágenes quinta y sexta están actualmente en el lado izquierdo de caja y no centrado. Debido a esto, nuestras quintas y sextas imágenes reciben diferentes traducciones. Ambos tienen su origen. 200 píxeles a la derecha del extremo izquierdo de caja. La quinta imagen debe ser rotada. -90 grados alrededor de Eje Y A cara izquierda y luego traducido. 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 es rotada. 90 grados alrededor de Eje Y A cara derecha y luego traducido. 700 píxeles a lo largo de su nuevo Eje Z. Esto lo coloca en el extremo derecho de nuestro objeto 3D.
La mejor manera de tener una idea de lo que hemos hecho es mirar la disposición actual de las imágenes. Si obtienes una vista previa de la presentación de diapositivas en Safari, verás esto actualmente:
Ocultemos la cara frontal, para que podamos ver si nuestras otras imágenes están posicionadas correctamente:
Ahora, quite el pantalla: ninguna De nuestra primera imagen. Es posible que haya notado que el cuadro es más grande en la pantalla, más cerca del espectador, de lo que debería ser. La cara frontal se ve especialmente demasiado grande y estirada.
Para corregir esto, necesitamos alejar todo el objeto 3D del espectador mediante 200 píxeles Añadir -webkit-transform: translateZ (-200px) a los estilos para caja. Mientras estamos en esto, también debemos agregar la propiedad de transición:
#box posición: relativa; bloqueo de pantalla; ancho: 900px; altura: 400px; -webkit-transform: translateZ (-200px); / * Empuja el objeto 3D a su lugar * / -webkit-transition: -webkit-transform 1s; / * Habilita transiciones para transformaciones * /
Con todo ese conjunto, estamos listos para animar nuestra caja..
Paso 4: Animación
Pegar en nuestro bloque final de estilismo. Esto agregará nuestras animaciones. Te lo explicaré con más detalle a continuación..
Cuando cada uno de nuestros elementos recibe la pseudoclase :atención nosotros giramos caja para mostrar el lado correcto. Tenga en cuenta que el caja Las rotaciones son todo lo contrario de las rotaciones que usamos en cada cara individual. Por ejemplo, la cuarta imagen fue rotada. negativo 90 grados alrededor de la Eje x. Para ponerlo a la vista debemos rotar todo el objeto 3D. positivo90 grados alrededor de Eje x. Las traducciones aseguran que el lado del objeto 3D que estamos viendo esté siempre a la distancia correcta.
¡Eso es! Echa un vistazo a la presentación de diapositivas en Safari para asegurarse de que todo está funcionando.
CSS final
El estilismo final en style.css debería verse así:
Probablemente no hay manera de justificar el uso de un montón de anidados s y elementos Como botones bajo las recomendaciones actuales de CSS3. Este experimento tampoco respeta la distinción de HTML por contenido, CSS por estilo y JS por comportamiento. Y dado que estas transformaciones actualmente solo funcionan en Safari, esta presentación de diapositivas no está lista para ser utilizada en proyectos de clientes. Pero el propósito de este experimento es mostrar y ampliar los límites de las nuevas funciones HTML5 y CSS3..
Si está interesado en adaptar esta presentación de diapositivas para navegadores con menos soporte, aquí hay algunos consejos útiles:
Utilice Modernizr. Seriamente!
Solo Safari admite las transformaciones 3D, pero puede crear una presentación de diapositivas ingeniosa utilizando transformaciones 2D y admitir una gama mucho más amplia de navegadores.
los opacidad La propiedad sería una excelente presentación de diapositivas y funcionaría en casi todos los navegadores. (Necesitarías filtrar para IE).
los Los botones se romperán en Firefox si están absolutamente posicionados. Es raro, lo sé. Solo asegúrate de usar posicionamiento relativo.
Espero que hayan disfrutado este tutorial. Espero sus comentarios y muchas gracias por leer.!
Share
Accentsconagua
