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

Slideshow 3D en CSS

Dernière modification : octobre 2022



<div class="cadre-demo">

<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>

</div>
	


*,*::before,*::after{box-sizing:border-box}



.cadre-demo{

height:400px;
width:600px;
margin:8rem auto;


	}
	


/*environnement en trois dimensions*/
#votre_slideshow{
height:400px;
width:600px;
perspective: 1200px;
perspective-origin: 50% 50%		
		}	
	
		
.cube{
position: relative;
float:left;
width:calc(100%/3);
height: inherit;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: votre-anim cubic-bezier(.6,1,.4,1) infinite 15s;
	
}		
		
	#cube1{
	
z-index: 1;
animation-delay: 1s
	
	}
	
#cube2{
	
z-index: 2;
animation-delay: 1.2s
	
	}
	
#cube3{
	
z-index: 1;
animation-delay: 1.4s
	
	}
	

		
/* on cree une class qu'on va repeter sur chaque id*/
.cube div{
	
position:absolute;
	
	}
		

.gauche-droite{

width:200%;
height:400px;

}
	

	
.devant-derriere{
	
width:100%;
height:100%
		
}
	
.haut-bas{
	
width:100%;
height:100%
		
	}
	


/* images et position-les six faces du cube*/
	
.devant{
	
background-image:url(images/1.jpg);
background-size:cover;
transform:translateZ(200px)
	
	}

.derriere{
	
background-image:url(images/3.jpg);
background-size:cover;
transform: rotateY(180deg) rotateZ(180deg) translateZ(200px)
	
	}

.haut{
	
background-image:url(images/2.jpg);
background-size:cover;
transform: rotateX(90deg) translateZ(200px)
	
	}

.bas{
		
background-image:url(images/4.jpg);
background-size:cover;
transform: rotateX(-90deg) translateZ(200px)
	
	}
	
.gauche{
	
background: #000;
transform:rotateY(90deg) translateZ(0)
	
	}

/*pas d'image ici-on met un background*/
 .droite{

background: #000;
transform:  rotateY(-90deg) translateZ(200px)
	
	}			
	
	


/*Pour que les images soient a la meme hauteur les unes sur les autres*/
#cube1 div{
	
	background-position: 0 0
	
	}
	
#cube2 div{
	
	background-position: -100% 0
	
	}
	
#cube3 div{
	
	background-position:-200% 0
	
	}

/*animation slideshow 3D*/

@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)
	}
	
	}	



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.