La implementación de HTML5 y CSS3 no solo proporcionó una nueva forma de estandarizar los elementos en una página, dando la posibilidad de incluir nuevos elementos que aportaran un mayor grado de utilidad en el desarrollo de la aplicaciones web sino que también permitió extender las posibilidades de estas dejando de un lado lenguajes como JavaScript para realizar efectos y transiciones gracias a CSS3.
Obviamente existen librerías de JavaScript que tienen unos efectos increíbles y hacen que su implementación sea bastante sencilla, pero la mayoría de las veces esta funcionalidad viene encapsulada y las posibilidades de modificaciones se complican en gran manera.
Para estos casos podemos valernos de CSS3 y con un poco de trabajo podremos lograr efectos y funcionalidades realmente alucinantes como un carrusel, algo que en el pasado solo era posible con JavaScript.
Creando nuestro carrusel
Primero incluiremos el código HTML para nuestro carrusel, el cual será bastante sencillo ya que solo incluirá la inclusión de nuestra hoja de estilos, la etiqueta <figure> para indicar que todo lo que esté dentro de esta será contenido gráfico, como fotos, diagramas o en este caso nuestro carrusel:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="estilos_carrusel.css" />
<meta charset="UTF-8">
<title>Carrusel CSS3</title>
</head>
<body>
<figure class="tarjetas">
<div class="tarjetas__contenido">
<div class="tarjetas__elemento"><h1>Elemento 1</h1></div>
<div class="tarjetas__elemento"><h1>Elemento 2</h1></div>
<div class="tarjetas__elemento"><h1>Elemento 3</h1></div>
</div>
</figure>
</body>
</html>Importante destacar las clases que hemos incluido en nuestros div, ya que son los que nos permitirán realizar la manipulación en nuestro css. Hecho esto pasaremos a la implementación de nuestra hoja de estilos, empezando primero por darle la apariencia 3D a nuestros elementos, para ello utilizaremos la propiedad perspective y transform:
.tarjetas {
position: absolute;
top: 50%;
left: 50%;
width: 190px;
height: 210px;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}Teniendo esto vamos a incluir algunas animaciones para darle el estilo de carrousel trabajando en función de una regla que definiremos más adelante, definimos además los segundos que queremos que el mismo haga las transiciones, y fijamos la posición para nuestras tarjetas dentro del carrusel:
.tarjetas__contenido {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
-webkit-animation: carrusel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
animation: carrusel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.tarjetas__elemento {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 210px;
border-radius: 6px;
}Ahora trabajaremos en tarjeta por separado utilizando nth-child, esto para colocarle un color de fondo diferente para cada una de estas y del manejo de transiciones para las mismas:
.tarjetas__elemento:nth-child(1) {
background: #394fd5;
-webkit-transform: rotateY(0) translateZ(182px);
transform: rotateY(0) translateZ(182px);
}
.tarjetas__elemento:nth-child(2) {
background: #39d570;
-webkit-transform: rotateY(120deg) translateZ(182px);
transform: rotateY(120deg) translateZ(182px);
}
.tarjetas__elemento:nth-child(3) {
background: #f0091f;
-webkit-transform: rotateY(240deg) translateZ(182px);
transform: rotateY(240deg) translateZ(182px);
}Por último fijamos un color de fondo para el body y agregamos nuestras reglas para la palabra carrusel, esto lo hacemos con keyframes el cual se encarga de definir el código para la animación:
body {
background: #6c4949;
}
@-webkit-keyframes carrusel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%, 45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%, 72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%, 100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}
@keyframes carrusel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%, 45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%, 72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%, 100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}Con esto listo veamos cómo se ve nuestro carrusel animado en nuestro navegador:
Como vemos es bastante sencillo pero cumple su funcionalidad y lo que es mejor aún sin utilizar ni una sola línea de código en JavaScript, solo queda de cada quien tomar el ejemplo y experimentar un poco con el mismo, aumentando su tamaño, agregando imágenes y cambiando el estilo del carrusel, algo que es totalmente posible debido a la forma en que fue construido.
Muy interesante, gracias por la explicacion.