@charset "utf-8";
	.conteneur{
		margin-top:-50px;
		margin-left:600px;
		perspective:1200px;
		-webkit-perspective:1200px;
		-moz-perspective:1200px;
	}
	#cube{
		height:100px;
		width:100px;
		transform-style:preserve-3d;
		transform: rotatex(-25deg)rotatey(35deg);
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-webkit-transform: rotatex(-25deg)rotatey(35deg);
		-moz-transform: rotatex(-25deg)rotatey(35deg);
	}
	#cube div{
		position:absolute;
		height:32px;
		width:32px;
	}
	#face{
		transform: translatez(16px);
		-webkit-transform: translatez(16px);
		-moz-transform: translatez(16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#dos{
		transform: translatez(-16px);
		-webkit-transform: translatez(-16px);
		-moz-transform: translatez(-16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#droite{
		transform: rotatey(-90deg)translatez(16px);
		-webkit-transform: rotatey(-90deg)translatez(16px);
		-moz-transform:rotatey(-90deg) translatez(16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#gauche{
		transform: rotatey(90deg)translatez(16px);
		-webkit-transform: rotatey(90deg)translatez(16px);
		-moz-transform:rotatey(90) translatez(16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#haut{
		transform: rotatex(90deg)translatez(16px);
		-webkit-transform: rotatex(90deg)translatez(16px);
		-moz-transform:rotatex(90) translatez(16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#bas{
		transform: rotatex(-90deg)translatez(16px);
		-webkit-transform: rotatex(-90deg)translatez(16px);
		-moz-transform:rotatex(-90) translatez(16px);
		background: url(../images/ico_web.png) no-repeat center;
	}
	#cube{
		animation-name: rotateCube;
		animation-duration:6s;
		animation-iteration-count:2;
		animation-delay:1s;
		animation-direction:alternate;
		-webkit-animation-name: rotateCube;
		-webkit-animation-duration:6s;
		-webkit-animation-iteration-count:2;
		-webkit-animation-delay:1s;
		-webkit-animation-direction:alternate;
		-moz-animation-name: rotateCube;
		-moz-animation-duration:6s;
		-moz-animation-iteration-count:2;
		-moz-animation-delay:1s;
		-moz-animation-direction:alternate;

	}
	@-webkit-keyframes rotateCube{
		0%{
			transform: translatez(-16px) rotatex(-25deg) rotatey(35deg);
			-webkit-transform: translatez(-16px) rotatex(-25deg) rotatey(35deg);
			-moz-transform: translatez(-16px) rotatex(-25deg) rotatey(35deg);
		}
		50%{
			transform: translatez(-16px) rotatex(65deg) rotatey(125deg);
			-webkit-transform: translatez(-16px) rotatex(65deg) rotatey(125deg);
			-moz-transform: translatez(-16px) rotatex(65deg) rotatey(125deg);
		}
		100%{
			transform: translatez(-16px) rotatex(335deg) rotatey(395deg);
			-webkit-transform: translatez(-16px) rotatex(335deg) rotatey(395deg);
			-moz-transform: translatez(-16px) rotatex(335deg) rotatey(395deg);
		}
	}