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