Créer un caroussel 3D

 
photo1 photo2 photo3 photo4 photo5 photo6 photo7 photo8

Pour ajouter ce caroussel à votre site, dans votre éditeur de texte sélectionner le mode Éditeur HTML Editeur html et ajouter ce code :

<style>
  *{box-sizing:border-box}
body{margin:0}
ul{padding:0}

.caroussel_diapo input{display:none}
    
.caroussel_diapo{   
position:relative;
text-align: center;
margin:0 auto}


.contenu_carou {
width: 250px;
height: 332px;
margin: 2rem auto;
perspective: 1000px}


.caroussel {
position: relative;
transform-style: preserve-3d;
width: 500px;
height: 332px;
transition: 1s transform}

.caroussel img {
position: absolute;
top: 0;
left: 0;
outline:1px solid transparent;
backface-visibility:hidden;
will-change: transform;
transition: 1s transform
}

    
.caroussel img:nth-child(1){
    
    transform:translate3d(0,0,540px) scale(.8)
    
    }
    
.caroussel img:nth-child(2){
    
    transform:rotateY(45deg) translateZ(540px) scale(.8)
    
    }
    
.caroussel img:nth-child(3){
    
    transform:rotateY(90deg) translateZ(540px) scale(.8)
        
    }
    
.caroussel img:nth-child(4){
    
    transform:rotateY(135deg) translateZ(540px) scale(.8)
    
    }
    
.caroussel img:nth-child(5){
    
    transform:rotateY(180deg) translateZ(540px) scale(.8)
    
    }
    
.caroussel img:nth-child(6){
    
    transform:rotateY(225deg) translateZ(540px) scale(.8)
    
    }
    
.caroussel img:nth-child(7){
    
transform:rotateY(270deg) translateZ(540px) scale(.8)
    
    }
    
.caroussel img:nth-child(8){
    
transform:rotateY(315deg) translateZ(540px) scale(.8)

}

.caroussel_diapo input[type=radio] + label {
cursor: pointer;
background-color: #d7d7d7;/*-Couleur du bouton non sélectionné-*/
display: inline-block;
width: 20px;
border-radius: 50%;
height: 20px
    }
    
.caroussel_diapo input[type=radio]:checked + label{
    
    background-color:#dc4747;/*-Couleur du bouton-*/
        
    }


    

/*gauche*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel{

    transform:translateZ(-540px)
    
    }
    
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{
    
transform:translateZ(-540px) rotateY(-45deg)
    
    }
    
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-90deg)
        
    }
    
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-135deg)
        
    }
    
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-180deg)
        
    }
    
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-225deg)
        
    }
    
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-270deg)
    
    }
    
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{
    
    transform:translateZ(-540px) rotateY(-315deg)
    
    }


/*droite*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1){
    
    transform:translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2){
    
transform:rotateY(45deg) translateZ(540px) scale(1)
    
    }
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3){
    
    transform:rotateY(90deg) translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4){
    
    transform:rotateY(135deg) translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5){
    
    transform:rotateY(180deg) translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6){
    
    transform:rotateY(225deg) translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7){
    
    transform:rotateY(270deg) translateZ(540px) scale(1)
    
    }
    
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8){
    
    transform:rotateY(315deg) translateZ(540px) scale(1)
        
    }
</style>

<div class='caroussel_diapo'>
<input checked id="carou_un" name="rotation" type="radio">
<label for="carou_un"></label>
<input id="carou_deux" name="rotation" type="radio">
<label for="carou_deux"></label>
<input id="carou_trois" name="rotation" type="radio">
<label for="carou_trois"></label>
<input id="carou_quatre" name="rotation" type="radio">
<label for="carou_quatre"></label>
<input id="carou_cinq" name="rotation" type="radio">
<label for="carou_cinq"></label>
<input id="carou_six" name="rotation" type="radio">
<label for="carou_six"></label>
<input id="carou_sept" name="rotation" type="radio">
<label for="carou_sept"></label>
<input id="carou_huit" name="rotation" type="radio">
<label for="carou_huit"></label>
<div class="contenu_carou">
<div class="caroussel">
<img src="Lien de votre photo 1" alt=photo1>
<img src="Lien de votre photo 2" alt=photo2>
<img src="Lien de votre photo 3" alt=photo3>
<img src="Lien de votre photo 4" alt=photo4>
<img src="Lien de votre photo 5" alt=photo5>
<img src="Lien de votre photo 6" alt=photo6>
<img src="Lien de votre photo 7" alt=photo7>
<img src="Lien de votre photo 8" alt=photo8>
</div>
</div>
</div>

 

/*-Couleur du bouton non sélectionné-*/ = Pour personnaliser la couleur du bouton non sélectionné.

/*-Couleur du bouton-*/ = Pour personnaliser la couleur du bouton sélectionné.

Retour   Accueil   

Ajouter un commentaire