Bonjour à tous,
J'essaie de mettre mon code dans la structure (ligne) du site. Mon code : carrousel 3D, il est en dehors de la ligne. Celui que je vous présente et un exemple de base que j'ai trouvé. Mais j'ai modifié la structure du code pour intégrer des avis et non des images.
exemple:
<style type="text/css">
*{box-sizing: border-box}
img{max-width:100%}
.contenu_carou_auto{
margin:2rem auto;
width:420px;
height:279px;
perspective:8000px
}
.caroussel-image{
animation:rotation 24s infinite alternate linear;
transform-style:preserve-3d;
position:relative;
}
.caroussel-image img{
position: absolute;
top:0;
left: 0;
}
.caroussel-image img{
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:400px;
height:266px;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
}
.caroussel-image img:nth-child(1){
transform:translate3d(0,0,495px)
}
.caroussel-image img:nth-child(2){
transform:rotateY(45deg) translateZ(495px)
}
.caroussel-image img:nth-child(3){
transform:rotateY(90deg) translateZ(495px)
}
.caroussel-image img:nth-child(4){
transform:rotateY(135deg) translateZ(495px)
}
.caroussel-image img:nth-child(5){
transform:rotateY(180deg) translateZ(495px)
}
.caroussel-image img:nth-child(6){
transform:rotateY(225deg) translateZ(495px)
}
.caroussel-image img:nth-child(7){
transform:rotateY(270deg) translateZ(495px)
}
.caroussel-image img:nth-child(8){
transform:rotateY(315deg) translateZ(495px)
}
@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}
</style>
<div class='caroussel_auto'>
<div class="contenu_carou_auto">
<div class="caroussel-image">
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
<img src="/images/un-infime-espoir-alexandrie-phoenix-erato-editon.jpg?fx=r_300_480" alt>
</div>
</div>
</div>
Merci de votre aide.
