Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Lightbox/slideshow/slider

Diaporama 3D en CSS

Code :

HTML


<div class="nom_de_votre_class">
<ul class="exemple-cube">
<li class="un liste" tabindex="1"><img src="image.jpg" alt></li>
<li class="deux liste" tabindex="2"><img src="image.jpg" alt></li>
<li class="trois liste" tabindex="3"><img src="image.jpg" alt></li>
<li class="quatre liste" tabindex="4"><img src="image.jpg" alt></li>
<li class="cinq liste" tabindex="5"><img src="image.jpg" alt></li>
<li class="six liste" tabindex="6"><img src="image.jpg" alt></li>
<li class="cadre-cube">
<span class="cube">
<span class="devant"><img src="image.jpg" alt></span>
<span class="derriere"><img src="image.jpg" alt></span>
<span class="droite"><img src="image.jpg" alt></span>
<span class="gauche"><img src="image.jpg" alt></span>
<span class="dessus"><img src="image.jpg" alt></span>
<span class="dessous"><img src="image.jpg" alt></span>
</span>
</li>
</ul>	
</div>


CSS


*{box-sizing:border-box}

ul {padding: 0;list-style-type: none;margin:0}

/*diapo*/
.nom_de_votre_class{
	
margin:0 auto 600px auto
	
	}

.exemple-cube {
	
position: relative; 
top: 0;
left: 0;	
display: flex;
justify-content: space-around;

	
}

.liste {
	
width: 100px;
height: 100px;
position: relative;
z-index:1;
cursor: pointer
	
}

	
.liste:focus-within img {opacity:.3}

.liste img {
	
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
will-change: opacity;
border: .25rem solid;
transition: opacity .3s;
object-fit: cover
	
}

.cadre-cube {
	
width: 600px;
height: 600px;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
perspective: 600px
	
	}

.cube {
	
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transform: translateZ(-600px);
will-change: transform;
transition: transform 2s
	
}

.cube span {
	
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 0;

}

.devant {

transform:rotateX(0) translateZ(300px)
	
}

.derriere {

transform: rotateX(180deg) translateZ(300px)
	
}

.droite {

transform: rotateX(90deg) translateZ(300px)
	
}

.gauche {
	
transform: rotateX(-90deg) translateZ(300px)
	
}

.dessus {

transform: rotateY(-90deg) translateZ(300px)
	
}

.dessous {

transform: rotateY(90deg) translateZ(300px);
	
}

.cube img {
	
width: 100%;
height: 100%;
outline: 1px solid transparent;
border:.5rem solid;
position: absolute;
left: 0;
top: 0;
object-fit: cover
	
}

.exemple-cube .liste:focus-within ~ .cadre-cube .cube {
	
will-change: transform;
transition: transform 1s
	
}
	

.un:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateY(0)
	
}
	
.deux:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateX(-180deg)
	
}

.trois:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateX(-90deg)
}

.quatre:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateX(90deg)
	
}

.cinq:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateY(90deg)
	
}

.six:focus-within ~ .cadre-cube .cube {
	
transform: translateZ(-600px) rotateY(-90deg)
	
}

Support navigateurs :

CSS transforms 3d

Source, inspiration, ressources :

source originale

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.