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

Slider 3D en CSS

Dernière modification : octobre 2022



<div class="slider">

<input type="radio" name="slider-3d" id="slider1" checked>
<input type="radio" name="slider-3d" id="slider2">
<input type="radio" name="slider-3d" id="slider3">
<input type="radio" name="slider-3d" id="slider4">
<input type="radio" name="slider-3d" id="slider5">

<label for="slider1">
<img src="image.jpg" alt>
</label>
  
<label for="slider2">
<img src="image.jpg" alt>
</label>
	
<label for="slider3">
<img src="image.jpg" alt>
</label>
	
<label for="slider4">
<img src="image.jpg" alt>
</label>
	
<label for="slider5">
<img src="image.jpg" alt>
</label>	
</div>




*{box-sizing:border-box}

img{max-width:100%;display:block}

.slider {

position: relative;
max-width:clamp(60%,(100vw - 64rem)*1000,600px) ;
aspect-ratio:3/2;
margin: 5rem auto;
perspective: 600px;
transform-style: preserve-3d;
text-align: center;
}

	
.slider input[name="slider-3d"]{

position: relative;
appearance: none;
top: -40px;
left: 0;
display: inline-block;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
cursor: pointer;
	
	}




input[name="slider-3d"]:checked {
	
 background-color:#6753ea
	 
}

input[name="slider-3d"]:not(:checked){
	
background-color:#c3c3c3
	
	}	



.slider label {
 
position: absolute;

left: 0;
top: 0;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 400ms cubic-bezier(0.6, -1, 0.4, 1.5);
	
}


#slider1:checked ~ label[for=slider1], 
#slider2:checked ~ label[for=slider2], 
#slider3:checked ~ label[for=slider3], 
#slider4:checked ~ label[for=slider4], 
#slider5:checked ~ label[for=slider5] {
	
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
transform: unset;
cursor: unset
	
}
	
	
	

/* suivant */
#slider1:checked ~ label[for=slider2], 
#slider2:checked ~ label[for=slider3], 
#slider3:checked ~ label[for=slider4], 
#slider4:checked ~ label[for=slider5], 
#slider5:checked ~ label[for=slider1] {
  
box-shadow: 0 6px 12px rgba(0,0,0,.4), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(15%, 0, -100px);
	
}



#slider1:checked ~ label[for=slider3], 
#slider2:checked ~ label[for=slider4], 
#slider3:checked ~ label[for=slider5], 
#slider4:checked ~ label[for=slider1], 
#slider5:checked ~ label[for=slider2] {
	
box-shadow: 0 1px 4px rgba(0,0,0,.4);
transform: translate3d(30%, 0, -200px);
	
}


#slider1:checked ~ label[for=slider4], 
#slider2:checked ~ label[for=slider5], 
#slider3:checked ~ label[for=slider1], 
#slider4:checked ~ label[for=slider2], 
#slider5:checked ~ label[for=slider3] {
	
box-shadow: 0 1px 4px rgba(0,0,0,.4);
transform: translate3d(-30%, 0, -200px);
}

/* précédent */
#slider1:checked ~ label[for=slider5], 
#slider2:checked ~ label[for=slider1], 
#slider3:checked ~ label[for=slider2], 
#slider4:checked ~ label[for=slider3], 
#slider5:checked ~ label[for=slider4] {
	
  box-shadow: 0 6px 12px rgba(0,0,0, 0.4), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(-15%, 0, -100px);
}
	



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.