Tabla de contenido
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
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.