essais.css

body{
	width: 100%;
	height: 100vh;
	background-color: pink;
}

.hands-container{
	width: 100%;
	height: 300px;
	display: flex;
	justify-content: center;
}

.hand-container{
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 20px;
}

.hand{
	height: 100%;
	width: 100%;
	background-image: url(pierre2.png);
	background-position: 50%;
	background-size: contain;
	transform-origin: 100% 100%;
}

#joueur	{
	transform: rotateY(180deg);
	transform-origin: 50%;
}


.anime{
	animation: move 1.5s linear forwards;
}

@keyframes move {
	0%{
		transform: rotateZ(0deg);
	}
	17%{
		transform: rotateZ(20deg);
	}
	32%{
		transform: rotateZ(0deg);
	}
	50%{
		transform: rotateZ(20deg);
	}
	65%{
		transform: rotateZ(0deg);
	}
	84%{
		transform: rotateZ(20deg);
	}
	100%{
		transform: rotateZ(0deg);
	}
}