Inicio Apuntes FPApuntes DAMSlider con forma de cubo 3d creado solo con CSS

Slider con forma de cubo 3d creado solo con CSS

Este slider es automático, no tiene controles

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo para un usuario que me ha preguntado cómo podría crear un slider vistoso sin necesidad de utilizar JavaScript. Pensándolo un poco, y buscando otro poco por internet, me he encontrado con algunas propiedades CSS que permiten crear un slider con forma de cubo 3d, y quizás esto te pueda ser de ayuda.

Dado que las transformaciones 3D de CSS se han vuelto ampliamente compatibles, muchos sitios web intentan recrear efectos de transición, usando únicamente CSS. Gracias a estas transformaciones, cualquier puede crear algo un poco diferente, como lo que vamos a ver a continuación.

En las siguientes líneas vamos a ver una presentación de diapositivas deslizante con un efecto en 3D, utilizando un estilo de cubo diferente a lo habitual. Este se puede adaptar y reutilizar de forma muy sencilla en cualquier proyecto. Como decía, esto se consigue utilizando solo CSS, no necesitarás meter JavaScript o SVG.

Crea un Slider con forma de cubo 3D

slider con forma de cubo 3d

Para crear este ejemplo, solo son necesarios dos archivos, y seis imágenes (las cuales cada cual podrá elegir a su gusto). Estas imágenes mejor meterlas en una misma carpeta (si no quieres utilizar direcciones web).

Archivo index.html

En el primero de los archivos, vamos a crear la estructura de este ejemplo. Este archivo lo vamos a llamar index.html. Dentro, tan solo es necesario pegar el siguiente código:

<!DOCTYPE html>
<html lang="es" >
<head>
  <meta charset="UTF-8"/>
  <title>Cubo 3D con CSS</title>
  <link rel="stylesheet" href="./style.css"/>
<!--https://www.cssscript.com/css-3d-cube-slider/-->
</head>
<body>
<!--Título-->
<div class="titulo">Cubo   3D</div>
<!-- Grupo de imágenes --> 
<div class="slider">
  <img src="../img/entreunosyceros.net.png" alt="entreunosyceros">
  <img src="../img/isthisthelife.jpg" alt="is this the life">
  <img src="../img/Error-404-entreunosyceros.jpg" alt="404">
  <img src="../img/mundo.jpeg" alt="Mundo">
  <img src="../img/sapoclay.png" alt="SapoClay">
  <img src="../img/Ubuntu-unveils-.jpg" alt="Ubuntu">
</div>

</body>
</html>

Quiero aclarar que las imágenes las he colocado en una carpeta fuera de la carpeta que incluye en archivo index.html y style.css. Esto es algo que se debe tener en cuenta antes de ver que no funciona.

Archivo style.css

Todo lo que va a suceder en este ejemplo, será gracias a las reglas CSS que vamos a pegar en este archivo llamado style.css. Aquí utilizaremos los keyframes, que para quién no sepa qué son o para que sirven, solo decirles que los @keyframes de CSS controlan los pasos intermedios en una secuencia de animación CSS definiendo estilos para fotogramas clave (o waypoints) a lo largo de la secuencia de animación (así, dicho en general …)

Bueno, dentro de style.css, solo necesitaremos pegar el siguiente código:

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  background: #6d6d6d;
  place-content: center;
  animation: b 10s infinite;
  justify-content: center;
  align-items: center;
}

.slider {
  --s: 250px; /* el tamaño */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  --_p: perspective(calc(3*var(--s)));
  animation: r 10s infinite cubic-bezier(.5,-0.5,.5,1.5);
}

.slider img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
}

/*Rotación*/
.slider img:nth-child(2) {--_t: rotateX(-90deg)}
.slider img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.slider img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.slider img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.slider img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,5%   {transform: var(--_p) rotateX( 0deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  12%,20% {transform: var(--_p) rotateX(90deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  30%,37% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  45%,54% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  60%,70% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate( 0deg) rotateY(  0deg)}
  80%,87% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(  0deg)}
  95%,to  {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(-90deg)}
}

/*cambio color de fondo*/
@keyframes b {
  0%,5%   {background: #008a12}
  12%,20% {background: #7a7a7a}
  30%,37% {background: #830000}
  45%,54% {background: #000000}
  60%,70% {background: #00380e}
  80%,87% {background: #390068}
  95%,to  {background: #008a12}
}

/*Título*/

  .titulo {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  justify-content: center;
  align-items: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  bottom: 2em;
}

.titulo:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}

Y con esto, ya tendremos disponible un slider con forma de cubo 3d, con el que mostrar aquello que queramos a los visitantes de nuestro sitio.

Para ejecutarlo, solo será necesario hacer doble clic sobre el archivo index.html. Si quieres ver funcionando este ejemplo, no tienes más que hacer clic en el siguiente enlace, que te llevará a la sección de ejemplos de esta página.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.