Slideshow 3D en CSS


✔️ Support navigateurs :

Chrome Edge firefox Internet Explorer Opera Safari iOS Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo iOS Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
36+ 12+ 16+ 10+ (support partiel) 23+ 9+ 9.2+ 11.4 (préfixe webkit) 4+

<div id="votre_slideshow">
<div id="cube1" class="cube">
<div class="devant devant-derriere"></div>
<div class="derriere devant-derriere"></div>
<div class="gauche gauche-droite"></div>
<div class="droite gauche-droite"></div>
<div class="haut haut-bas"></div>
<div class="bas haut-bas"></div>
</div>
	
<div id="cube2" class="cube">
<div class="devant devant-derriere"></div>
<div class="derriere devant-derriere"></div>
<div class="gauche gauche-droite"></div>
<div class="droite gauche-droite"></div>
<div class="haut haut-bas"></div>
<div class="bas haut-bas"></div>
</div>

<div id="cube3" class="cube">
<div class="devant devant-derriere"></div>
<div class="derriere devant-derriere"></div>
<div class="gauche gauche-droite"></div>
<div class="droite gauche-droite"></div>
<div class="haut haut-bas"></div>
<div class="bas haut-bas"></div>
</div>
</div>	
	

* {box-sizing:border-box}
body {margin:0}



#votre_slideshow {
	
width: 900px;
height: 900px;
transform: scale3d(.5,.5,.5);
perspective: 900px;
perspective-origin: 50% 50%
	
}


#cube1{
	
z-index: 1;
animation-delay: 1s
	
	}
	
#cube2{
	
z-index: 2;
animation-delay: 1.2s
	
	}
	
#cube3{
	
z-index: 1;
animation-delay: 1.4s
	
	}
	


.cube{
	
position: relative;
float: left;
width: 300px;
height: 600px;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: votre-anim cubic-bezier(.6,1,.4,1) infinite 15s
	
	}


.cube div{
	
	position:absolute; !important

	}
	
.devant-derriere{
	
	width:300px;
	height:600px
		
	}
	
.haut-bas{
	
	width:300px;
	height:600px
		
	}
	
.gauche-droite{
	
	width:600px;
	height:600px
	
	}


	
.devant{
	
background-image:url(image.jpg);
transform:translateZ(300px)
	
	}

.derriere{
	
background-image:url(image3.jpg);
transform: rotateY(180deg) rotateZ(180deg) translateZ(300px)
	
	}

.haut{
	
background-image:url(image2.jpg);
transform: rotateX(90deg) translateZ(300px)
	
	}

.bas{
	
background-image:url(image4.jpg);
transform: rotateX(-90deg) translateZ(300px)
	
	}


	
.gauche{
	
background: black;
transform:rotateY(90deg) translateZ(0)
	
	}


.droite{
	
background: black;
transform: rotateY(-90deg) translateZ(300px)
	
	}


#cube1 div{
	
	background-position: 0 0
	
	}
	
#cube2 div{
	
	background-position: -300px 0
	
	}
	
#cube3 div{
	
	background-position:-600px 0
	
	}



@keyframes votre-anim {
from,to{}
	
10%,25%{
	transform: rotateX(-90deg)
	}
	
35%,50%{
	transform: rotateX(-180deg)
	}
	
60%,75%{
	transform: rotateX(-270deg)
	}
	
85%,100%{
	transform: rotateX(-360deg)
	}
	
	}	

👉 Source, inspiration, ressources :

source originale🔗