Automático 3D imagen rotador con CSS puro

Vista prévia

Descripción

Se trata de un deslizador de imagen 3D automático/presentación/carrusel/rotador con zoom-on-Hover y pausa-en-Hover soporte, construido con CSS puro y CSS3.

Funcionamiento

Inserte las imágenes en el rotador 3D.

<section id="slideshow">

<div class="entire-content">


<div class="content-carrousel">



<figure class="shadow"><img src="1.jpg"/></figure>



<figure class="shadow"><img src="2.jpg"/></figure>



<figure class="shadow"><img src="3.jpg"/></figure>



<figure class="shadow"><img src="4.jpg"/></figure>



<figure class="shadow"><img src="5.jpg"/></figure>



...


</div>

</div>
</section>

El CSS/CSS3 primario para el rotador 3D. Modifique, reemplace los siguientes fragmentos de código CSS e insértelos en su página web.

#slideshow {

margin: 0 auto;

padding-top: 50px;

height: 600px;

width: 100%;

background-color: #6adecd;

box-sizing: border-box;
}

.entire-content {

margin: auto;

width: 190px;

perspective: 1000px;

position: relative;

padding-top: 80px;
}

.content-carrousel {

width: 100%;

position: absolute;

float: right;

animation: rotar 15s infinite linear;

transform-style: preserve-3d;
}

.content-carrousel:hover {

animation-play-state: paused;

cursor: pointer;
}

.content-carrousel figure {

width: 100%;

height: 120px;

border: 1px solid #3b444b;

overflow: hidden;

position: absolute;
}

.content-carrousel figure:nth-child(1) {

transform: rotateY(0deg) translateZ(300px);
 } .content-carrousel figure:nth-child(2) {

transform: rotateY(40deg) translateZ(300px);
 } .content-carrousel figure:nth-child(3) {

transform: rotateY(80deg) translateZ(300px);
 } .content-carrousel figure:nth-child(4) {

transform: rotateY(120deg) translateZ(300px);
 } .content-carrousel figure:nth-child(5) {

transform: rotateY(160deg) translateZ(300px);
 } .content-carrousel figure:nth-child(6) {

transform: rotateY(200deg) translateZ(300px);
 } .content-carrousel figure:nth-child(7) {

transform: rotateY(240deg) translateZ(300px);
 } .content-carrousel figure:nth-child(8) {

transform: rotateY(280deg) translateZ(300px);
 } .content-carrousel figure:nth-child(9) {

transform: rotateY(320deg) translateZ(300px);
 } .content-carrousel figure:nth-child(10) {

transform: rotateY(360deg) translateZ(300px);
 }

 .shadow {


position: absolute;


box-shadow: 0px 0px 20px 0px #000;


border-radius: 1px;
}

.content-carrousel img {

image-rendering: auto;

transition: all 300ms;

width: 100%;

height: 100%;
}

.content-carrousel img:hover {

transform: scale(1.2);

transition: all 300ms;
}

@keyframes rotar {

from {


transform: rotateY(0deg);

} to {


transform: rotateY(360deg);

}
}