Carrusel 3D Perspective con CSS3 transforma

Vista prévia

Descripción

Un carrusel de perspectiva en 3D CSS puro que rota automáticamente a través de un grupo de contenido HTML usando las transformaciones CSS3.

Funcionamiento

Construye la estructura HTML para el carrusel.

<div class="carousel">

<div class="carousel-content">


<div class="carousel-item"></div>


<div class="carousel-item"></div>


<div class="carousel-item"></div>

</div>
</div>

Las reglas de estilo CSS/CSS3 principales para el carrusel.

.carousel {

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%);
}

.carousel-content {

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: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;

animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}

.carousel-item {

position: absolute;

top: 0;

left: 0;

width: 190px;

height: 210px;

border-radius: 6px;
}

.carousel-item:nth-child(1) {

background: rgba(252, 192, 77, 0.9);

-webkit-transform: rotateY(0) translateZ(182px);

transform: rotateY(0) translateZ(182px);
}

.carousel-item:nth-child(2) {

background: rgba(49, 192, 204, 0.9);

-webkit-transform: rotateY(120deg) translateZ(182px);

transform: rotateY(120deg) translateZ(182px);
}

.carousel-item:nth-child(3) {

background: rgba(236, 233, 242, 0.9);

-webkit-transform: rotateY(240deg) translateZ(182px);

transform: rotateY(240deg) translateZ(182px);
}

Cree los efectos de transformación 3D.

@-webkit-keyframes
 carousel {
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
 carousel {
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);
}
}