@charset "utf-8";
	/* CSS Document */
* {
	list-style:none;
	margin:0;
	padding:0;
	font-size:24px;
	color:#FFF;
}
body {
	perspective:1000px;
	animation:backChange 10s alternate infinite;
}
.one {
	width:200px;
	height:200px;
	margin:10px auto;
	position:relative;
	top:0;
}
.one>ul {
	width:200px;
	height:200px;
	margin:0 auto;
	position:absolute;
	top:0px;
	left:0px;
	transform-style:preserve-3d;
	animation:preserve 20s linear infinite;
}
.one>ul li {
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	opacity:0.5;
	transform-style:preserve-3d;
	position:absolute;
	border:10px outset #9C9DEB;
	box-sizing:border-box;
}
.one li:nth-of-type(1) {
	background-color:chocolate;
	transform:translateZ(100px);
}
.one li:nth-of-type(2) {
	background-color:blueviolet;
	transform:translateZ(-100px);
}
.one li:nth-of-type(3) {
	background-color:red;
	transform:translateZ(-100px) rotateY(-90deg);
	transform-origin:left;
}
.one li:nth-of-type(4) {
	background-color:deeppink;
	transform:translateZ(-100px) rotateY(90deg);
	transform-origin:right;
}
.one li:nth-of-type(5) {
	background-color:salmon;
	transform:translateZ(100px) rotateX(90deg);
	transform-origin:bottom;
}
.one li:nth-of-type(6) {
	background-color:slateblue;
	transform:translateZ(-100px) rotateX(90deg);
	transform-origin:top;
}
.one li:hover {
	opacity:1;
}
@keyframes preserve {
	0% {
	transform:rotateX(0deg) rotateY(0deg);
}
100% {
	transform:rotateX(-360deg) rotateY(360deg);
}
}@keyframes backChange {
	0% {
	background-color:red;
}
17% {
	background-color:orange;
}
34% {
	background-color:yellow;
}
51% {
	background-color:green;
}
68% {
	background-color:cyan;
}
85% {
	background-color:blue;
}
100% {
	background-color:purple;
}
}