Help me please with css

Tell us what’s happening:
Describe your issue in detail here.
I am trying to make a rotation with css/html and everything is going good untill
7/9 of my images are attached to one of my image in this 3d rotation.
Why must I use 2/4
Your code so far

css


.slideshow{
    margin:0 auto;
    padding-top:50px;
    height:700px;
    background-color: skyblue;
    box-sizing:border-box;}
        
    .content{
        margin:auto;
        width: 190px;
        perspective:1000px;
        position:relative;
        padding-top:80px;
      
    }

    
   
    .content-carrousel{
        width:100%;
        position:absolute;
        float:right;
        animation:rotar 15s infinite linear;
        transform-style:preserve-3d;
}

.content-carrousel:hover{
    animation-play-state:paused;
    cursor:pointer;
}
.content-carrousel figure{
    width:100%;
    height:120px;
    border:1px solid #4d444d;
    overflow:hidden;
    position:absolute;
}

.content-carrousel figure:nth-child(1){
    transform:rotateY(0deg) translateZ(300px);
}

content-carrousel figure:nth-child(2){
    transform:rotateY(40deg) translateZ(300px);
}
content-carrousel figure:nth-child(3){
    transform:rotateY(80deg) translateZ(300px);
} 
content-carrousel figure:nth-child(4){
    transform:rotateY(120deg) translateZ(300px);
} 
content-carrousel figure:nth-child(5){
    transform:rotateY(160deg) translateZ(300px);
}

content-carrousel figure:nth-child(6){
    transform:rotateY(200deg) translateZ(300px);
}
content-carrousel figure:nth-child(7){
    transform:rotateY(240deg) translateZ(300px);
}
content-carrousel figure:nth-child(8){
    transform:rotateY(280deg) translateZ(300px);
}
content-carrousel figure:nth-child(9){
    transform:rotateY(320deg) translateZ(300px);
}
figure.shadow{
    position:absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius:2px;
}
.content-carrousel img{
    image-rendering:auto;
    transition: all 300ms;
    width:100%;
    height:100%;
}
.content-carrousel img:hover{
    transform:scale(1.2);
    transition:all 300ms;
}
@keyframes rotar{
    from{
        transform:rotateY(0deg)
    } to{
        transform:rotateY(360deg);    }
}

  /* Only change code above this line */
}
  **Your browser information:**

file:///C:/Users/Jean/Documents/First%20Coding%20Project—From%20Jean%20Clenor/index.html

Link to the challenge:
Tribute Page project

what other images i don’t understand

Post a live example on Codepen.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.