Mont.16.5.23

Reprise d'un code trouvé sur le net: https://www.guyom-design.com/blog/demos/css/diapo-photos-3d-css3/

avec de nombreux exemples de montages par code CSS: https://www.guyom-design.com/blog/astuces/css/tuto_diapo_css/

5 images au ratio 16/9. Son code est destiné à des images au ratio 3/2.

Attention, ce code modifie la présentation de votre page !

<div class="slider"><input id="slider1" checked="checked" name="slider-3d" type="radio" /> <input id="slider2" name="slider-3d" type="radio" /> <input id="slider3" name="slider-3d" type="radio" /> <input id="slider4" name="slider-3d" type="radio" /> <input id="slider5" name="slider-3d" type="radio" /> <label for="slider1"><img src="http://ekladata.com/A8HYrPkJvqxD12ABZk4p2mgZDQk.jpg" alt="" /></label> <label for="slider2"><img src="http://ekladata.com/VHko7T9Ic5f1rxjYwSYy9MDJi5g.jpg" alt="" /></label> <label for="slider3"><img src="http://ekladata.com/yTlc3bTAEAUxrSKGxe3dV6zlj5k.jpg" alt="" /></label> <label for="slider4"><img src="http://ekladata.com/qe-6PJkpJGooyLJEg1XUJ4Tm344.jpg" alt="" /></label> <label for="slider5"><img src="http://ekladata.com/rWQcVrR9-Pc43vcdIRwN6XyBmA8.jpg" alt="" /></label></div>

<style><!--
*{box-sizing:border-box}
img{max-width:100%;display:block}
.slider {
position: relative;
max-width:clamp(60%,(100vw - 64rem)*1000,600px) ;
aspect-ratio:16/9;
margin: 5rem auto;
perspective: 600px;
transform-style: preserve-3d;
text-align: center;}

.slider input[name="slider-3d"]{
position: relative;
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; box-sizing:border-box; border:4px solid white;
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);}
--></style>