android 3d立方体旋转,CSS3实现3D旋转立方体

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

}

}