Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Carrousel 3D (responsive) en CSS

Dernière modification : octobre 2022

vous trouverez sur ce blog un tutoriel sur la création de carrousel en CSS.



<div class='caroussel_diapo'>

<input checked id="carou_un" name="rotation" type="radio">
<label for="carou_un"></label>
<input id="carou_deux" name="rotation" type="radio">
<label for="carou_deux"></label>
<input id="carou_trois" name="rotation" type="radio">
<label for="carou_trois"></label>
<input id="carou_quatre" name="rotation" type="radio">
<label for="carou_quatre"></label>
<input id="carou_cinq" name="rotation" type="radio">
<label for="carou_cinq"></label>
<input id="carou_six" name="rotation" type="radio">
<label for="carou_six"></label>
<input id="carou_sept" name="rotation" type="radio">
<label for="carou_sept"></label>
<input id="carou_huit" name="rotation" type="radio">
<label for="carou_huit"></label>

<div class="contenu_carou">

<div class="caroussel">
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
<img src="photo.jpg" alt>
</div>

</div>

</div>




*{box-sizing: border-box}


img{max-width:100%}

.caroussel_diapo input{
	
position:absolute;
left:-9999px
	
	}
    
.caroussel_diapo{	

text-align:center;
margin:5rem auto;

}
	
.caroussel {

max-width: 500px;
aspect-ratio:3/2;
position: relative;
margin:auto;
	
	}
@supports not(aspect-ratio:3/2){
	
	.caroussel{padding-top: 66.60%}	
	
	}
	
	
	
.caroussel img {
	
position: absolute;
top: 0;
left: 0;
opacity: 0;
outline: 1px solid transparent;
backface-visibility: hidden;
transition: 1s opacity
	
}

	


.caroussel_diapo input + label {
	
cursor: pointer;
background-color:#bababa;
display: inline-block;
width: 20px;
aspect-ratio:1;
border-radius: 50%;

	
	}

	@supports not(aspect-ratio:1){
	.caroussel_diapo input + label{height:20px}	
	}
	
.caroussel_diapo input:checked + label{
	background-color: #6753ea;
	
		
	}

/*droite*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1),
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2),
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3),
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4),
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5),
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6),
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7),
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8)
	
	
	{
		opacity:1;
	
	}
	

	
	
	
@media (min-width:62.75rem){
		
.caroussel {
transform-style: preserve-3d;
margin:2rem auto;
will-change: transform;
transition: 1s transform
	}
		
.contenu_carou {perspective:2000px}

.caroussel img {
filter:drop-shadow(0 15px 5px hsla(0, 0%, 0%, 0.43));
opacity:1;transition: 1s transform}
	
	
	.caroussel img:nth-child(1){
	
	transform:translate3d(0,0,540px) scale(.8)
	
	}
	
.caroussel img:nth-child(2){
	
	transform:rotateY(45deg) translateZ(540px) scale(.8)
	
	}
	
.caroussel img:nth-child(3){
	
	transform:rotateY(90deg) translateZ(540px) scale(.8)
		
	}
	
.caroussel img:nth-child(4){
	
	transform:rotateY(135deg) translateZ(540px) scale(.8)
	
	}
	
.caroussel img:nth-child(5){
	
	transform:rotateY(180deg) translateZ(540px) scale(.8)
	
	}
	
.caroussel img:nth-child(6){
	
	transform:rotateY(225deg) translateZ(540px) scale(.8)
	
	}
	
.caroussel img:nth-child(7){
	
transform:rotateY(270deg) translateZ(540px) scale(.8)
	
	}
	
.caroussel img:nth-child(8){
	
transform:rotateY(315deg) translateZ(540px) scale(.8)

}	
		
	.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel{

	transform:translateZ(-540px)
	
	}
	
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{
	
transform:translateZ(-540px) rotateY(-45deg)
	
	}
	
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-90deg)
		
	}
	
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-135deg)
		
	}
	
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-180deg)
		
	}
	
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-225deg)
		
	}
	
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-270deg)
	
	}
	
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{
	
	transform:translateZ(-540px) rotateY(-315deg)
	
	}


/*droite*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1){
	
	transform:translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2){
	
transform:rotateY(45deg) translateZ(540px) scale(1)
	
	}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3){
	
	transform:rotateY(90deg) translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4){
	
	transform:rotateY(135deg) translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5){
	
	transform:rotateY(180deg) translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6){
	
	transform:rotateY(225deg) translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7){
	
	transform:rotateY(270deg) translateZ(540px) scale(1)
	
	}
	
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8){
	
	transform:rotateY(315deg) translateZ(540px) scale(1)
		
	}	
		
	}



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.