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