Bonjour,

je me tourne vers vous, depuis hier je tente de faire un carrousel de 6 images avec CSS. Il fait une rotation en 3D comme prévu mais il se déplace tout seul sur l'axe horizontal de gauche à droite. Auriez-vous une solution pour m'aider à "bloquer" l'animation svp. 

Voici mon html :

<!-- Carrousel-->			

			<div id="wrapper">
				<div id="allPlan">
					<div class="plan p1"><img src="images/terre.png"></div>
					<div class="plan p2"><img src="images/lune.png"></div>
					<div class="plan p3"><img src="images/mars.png"></div>
					<div class="plan p4"><img src="images/neptune.png"></div>
					<div class="plan p5"><img src="images/venus.png"></div>
					<div class="plan p6"><img src="images/jupiter.png"></div>
					
				</div>	
			

et le CSS qui va avec :

#wrapper
{
    -webkit-perspective: 800;

}

#allPlan
{

    margin: 0 auto;
    justify-content: space-between;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: Carrousel 40s infinite linear;

}

.plan
{
    position: absolute;
    justify-content: space-between;
    
}

@-webkit-keyframes Carrousel
{
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform : rotateY(360deg); }
}

#allPlan > .p1{ -webkit-transform: translateZ(500px);}
#allPlan > .p2{ -webkit-transform: rotateY(60deg) translateZ(500px); }
#allPlan > .p3{ -webkit-transform: rotateY(120deg) translateZ(500px); }
#allPlan > .p4{ -webkit-transform: rotateY(180deg) translateZ(500px); }
#allPlan > .p5{ -webkit-transform: rotateY(240deg) translateZ(500px); }
#allPlan > .p6{ -webkit-transform: rotateY(300deg) translateZ(500px); }

Merci pour vos réponses

-
Edité par AlbanFauchon 25 mai 2018 à 15:28:21

Bonjour,

Merci d'utiliser la mise en forme de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

c'est fait !

pardon, je suis nouveau

Bonjour AlbanFauchon,

Je t'ai fait un petit exemple, j'espère que c'est cela que tu voulais :

https://codepen.io/Zonecss/pen/BxgezV

Merci beaucoup AliasDmc et merci pour les explications en commentaires dans le code !