Bonjour, j'ai crée un petit "mini-jeu" sur mon projet web voir lien : http://fortnitetools.com/random_map.php

Il y a plusieurs problème :

Je voudrais faire en sorte que le résultat ce trouve toujours au même endroit, c'est à dire, centré au centre de la page:

Le problème, c'est que si je fais ça, ce sera parfait dans ma résolution d'écran (qui est en 1440p) mais si je passes en 1080p ou bien en 720p le resultat ne sera pas centré, je ne sais pas comment faire cela..

Autre chose, actuellement je fais une transformation de -X pixels pour faire "déroulé" le tirage, il y a 20 résultat possible, mais pour tricher j'affiche ces 20 résultats 5x chacun,  car sinon l'animation de tirage est trop courte !

Voici ma page :

<div class="content_roulette">
	<div class="content_result">
		<?php 
		$random_pic = 1;
		for($i = 0; $i < 100; $i++)
		{ 
			if($i == 88)
			{
				echo '<div class="roulette_result win_roulette" style="background-image:url(images/fortnite/'.$src_pic.'/'.$result_roulette.'.png);"></div>'; 
			}
			else
			{  
				echo '<div class="roulette_result" style="background-image:url(images/fortnite/'.$src_pic.'/'.$random_pic.'.png);"></div>';           
			}
			
			$random_pic = $random_pic+1;
			
			if($random_pic > $pic_roulette_max) {$random_pic = 1; }
		}				
		?>
	</div>	
</div>

Css :

.roulette_result
{
	width:100px;
	height:100px;
	background-size:cover;
	display:inline-block;
	z-index:0;
	border-radius: 50px;
	border:5px solid #ffffff;
}

.win_roulette
{
	border:2px solid #f50;
}

.content_roulette
{
	width: 100%;
	height:100px;
	overflow: hidden;
	white-space:nowrap;
	position: relative;
	text-align:center;
	color:#000;
}

.content_result
{
	width: 100px;
	height: 100px;
	animation: animationFrames ease 5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: animationFrames ease 5s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; 
	-moz-animation: animationFrames ease 5s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards;
	-o-animation: animationFrames ease 5s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; 
	-ms-animation: animationFrames ease 5s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; 
}

@keyframes animationFrames
{
	from 
	{
		transform:  translate(0px,0px);
	}
	to 
	{
		transform:  translate(-8600px,0px)  ;
	}
}

@keyframes animationFrames
{
	from 
	{
		transform:  translate(0px,0px);
	}
	to 
	{
		transform:  translate(-8600px,0px)  ;
	}
}

@-moz-keyframes animationFrames
{
	from 
	{
		-moz-transform:  translate(0px,0px);
	}
	to 
	{
		-moz-transform:  translate(-8600px,0px)  ;
	}
}

@-webkit-keyframes animationFrames 
{
	from 
	{
		-webkit-transform:  translate(0px,0px);
	}
	to 
	{
		-webkit-transform:  translate(-8600px,0px)  ;
	}
}

@-o-keyframes animationFrames 
{
	from 
	{
		-o-transform:  translate(0px,0px);
	}
	to 
	{
		-o-transform:  translate(-8600,0px)  ;
	}
}

@-ms-keyframes animationFrames 
{
	from 
	{
		-ms-transform:  translate(0px,0px);
	}
	100%
	{
		-ms-transform:  translate(-8600,0px)  ;
	}	
}

J'aimerais faire en sorte qu'une fois que le tirage arrive au dernier résultat, il recommence à affiché le résultat 1 puis 2 puis 3..

Je ne sais pas si c'est clair.. les images = tirages

Exemple concret : image 1, 2, 3...20, 1, 2, 3, (animation s'arrête sur tirage 4), 5 ...10

Comment pourrais-je m'y prendre? merci d'avance

-
Edité par florianlecoconnier 15 mai 2018 à 14:25:02