Carrousel 3D CSS défilement automatique

La construction du slider en HTML :

<div class='caroussel_auto'>

<div class="contenu_carou_auto">

<div class="caroussel-image">

<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>

</div>

</div>
</div>

Voici comment procéder en CSS :

1. On crée un élément div conteneur dans lequel on va déclarer notre espace en trois dimensions avec la propriété perspective. Plus la perspective est grande, plus l'impression d'éloignement sera important. On détermine également une largeur et une longueur à l'élément (elles doivent correspondre à la taille des photos).

2. On crée ensuite un nouvel élément div en position relative, où l'on indique le type de transformation que l'on veut appliquer avec la propriété transform-style et la valeur preserve-3d. Notre environnement en trois dimensions est prêt.

3. Toujours dans ce même élément div, nous allons ajouter une animation CSS assez simple. Ici, il s'agit simplement de faire effectuer une simple rotation au contenu se trouvant dans l'élément.

4. Ensuite, on met en place nos images qui seront en position absolute. Dans cet exemple, nous avons huit images. Il s'agit donc d'un octogone. Nous allons maintenant devoir effectuer quelques calculs. Pour connaître chaque angle de notre carrousel, il suffit de diviser 360 degrés (un cercle complet) par le nombre de faces. Ainsi nous obtenons 45 degrés (360° / 8). Comme nous connaissons la largeur de chaque face du carrousel (400px dans notre exemple), on va pouvoir trouver l'apothème de l'octogone. On reporte le nombre (ici 495px) dans chaque image sur l'axe Z via la propriété transform. On indiquera par ailleurs une rotation sur l'axe Y.

*{box-sizing: border-box}


img{max-width:100%}

.contenu_carou_auto{

margin:2rem auto;
width:420px;
height:279px;
perspective:8000px
	
	}
		
.caroussel-image{
	
animation:rotation 24s infinite alternate linear;	
transform-style:preserve-3d;
position:relative;	

}

.caroussel-image img{
	
position: absolute;
top:0;
left: 0;
	
	
	}


		
.caroussel-image img{
	
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:400px;
height:266px;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
	
	}
		
.caroussel-image img:nth-child(1){
	
transform:translate3d(0,0,495px)
		
		}
		
.caroussel-image img:nth-child(2){
	
transform:rotateY(45deg) translateZ(495px)
	
		}
		
.caroussel-image img:nth-child(3){
	
	transform:rotateY(90deg) translateZ(495px)
	
	}
	
.caroussel-image img:nth-child(4){
	
	transform:rotateY(135deg) translateZ(495px)
	
	}
	
.caroussel-image img:nth-child(5){
	
	transform:rotateY(180deg) translateZ(495px)
	
	}
	
.caroussel-image img:nth-child(6){
	
	transform:rotateY(225deg) translateZ(495px)
	
	}
	
.caroussel-image img:nth-child(7){
	
	transform:rotateY(270deg) translateZ(495px)
	
	}
	
.caroussel-image img:nth-child(8){
	
	transform:rotateY(315deg) translateZ(495px)
	
	}

	

	
@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}