Buen día a todos. Tengo un carousel que puede tener un número impar de figuras, quizá sea algo simple pero no comprendo como ajustarlas. He jugado con los ángulos y el ancho pero no logro resolverlo.
Si tengo una cantidad par de figuras por ejemplo 6 no hay problema:
Y si tuviera 5 figuras queda un espacio:
¿Hay alguna forma de ajustarlas para que el resultado se vea como si tuviera 6 figuras?
El ejemplo: Carousel Stackblitz
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="slideshow">
<div class="entire-content">
<div class="content-carrousel">
<figure class="shadow">1</figure>
<figure class="shadow">2</figure>
<figure class="shadow">3</figure>
<figure class="shadow">4</figure>
<figure class="shadow">5</figure>
</div>
</div>
</div>
</body>
</html>
#slideshow {
margin: 0 auto;
height: 600px;
width: 100%;
}
.entire-content {
margin: auto;
width: 240px;
perspective: 1200px;
position: relative;
padding-top: 80px;
z-index: 1;
}
.content-carrousel {
width: 100%;
position: absolute;
animation: rotar 15s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel figure {
width: 100%;
height: 150px;
overflow: hidden;
position: absolute;
}
.content-carrousel figure:nth-child(1) {
transform: rotateY(0deg) translateZ(240px);
}
.content-carrousel figure:nth-child(2) {
transform: rotateY(60deg) translateZ(240px);
}
.content-carrousel figure:nth-child(3) {
transform: rotateY(120deg) translateZ(240px);
}
.content-carrousel figure:nth-child(4) {
transform: rotateY(180deg) translateZ(240px);
}
.content-carrousel figure:nth-child(5) {
transform: rotateY(240deg) translateZ(240px);
}
.shadow {
position: absolute;
box-shadow: 0px 0px 20px 0px #000;
text-align: center;
font-size: 5rem;
}
@keyframes rotar {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
z-index: 2;
}
}