<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

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

   Author:   Alyssa Milinkovich
   Date:     11/14/2023
   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;
} 



@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% {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);}
}


#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;
}

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

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

#cube {
	animation-name: spinCube;
	transition: 3s linear 3s;
}</pre></body></html>