@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 8
   Coding Challenge 3

   Author:   Matt Johnson
   Date:     11/25/24
   Filename: code8-3_anim.css

*/

div#cube {
	position: absolute;
	top: 300px;
	left: 350px;
	width: 300px;
	height: 300px;
	perspective: 2000px;
	transform: rotateX(24deg) rotateY(40deg);
	transform-style: preserve-3d;
}

div#cube img {
	display: block;
	width: 300px;
	height: 300px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#faceFront {
	animation-name: moveFront;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#faceBack {
	animation-name: moveBack;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#faceBottom {
	animation-name: moveBottom;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#faceLeft {
	animation-name: moveLeft;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#faceTop {
	animation-name: moveTop;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#faceRight {
	animation-name: moveRight;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

#cube {
	animation-name: spinCube;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes moveFront {
	0% {
		transform: translate3d(0px, 0px, 0px);
	}

	100% {
		transform: translate3d(0px, 0px, 150px);
	}
}

@keyframes moveBack {
	0% {
		transform: rotateY(0deg) translate3d(0px, 0px, 0px)
	}

	100% {
		transform: rotateY(180deg) translate3d(0px, 0px, 150px);
	}
}

@keyframes moveBottom {
	0% {
		transform: rotateX(0deg) translate3d(0px, 0px, 0px);
	}

	100% {
		transform: rotateX(-90deg) translate3d(0px, 0px, 150px);
	}
}

@keyframes moveLeft {
	0% {
		transform: rotateY(0deg) translate3d(0px, 0px, 0px);
	}

	100% {
		transform: rotateY(-90deg) translate3d(0px, 0px, 150px);
	}
}

@keyframes moveRight {
	0% {
		transform: rotateY(0deg) translate3d(0px, 0px, 0px);
	}

	100% {
		transform: rotateY(90deg) translate3d(0px, 0px, 150px);
	}
}

@keyframes moveTop {
	0% {
		transform: rotateX(0deg) translate3d(0px, 0px, 0px);
	}

	100% {
		transform: rotateX(90deg) translate3d(0px, 0px, 150px);
	}
}

@keyframes spinCube {
	0% {
		transform: rotateX(24deg) rotateY(40deg);
	}

	50% {
		transform: rotateX(204deg) rotateY(220deg);
	}

	100% {
		transform: rotateX(384deg) rotateY(400deg);
	}
}