html中正方形,css3正方形

div ul li body {

margin:0;

padding:0;

}

.box {

width:500px;

height:500px;

margin:300px auto;

position:relative;

transform-style:preserve-3d;

transform:rotateX(45deg) rotateY(45deg);

animation:change 5s 0.3s linear infinite;

}

@keyframes change {

from {

transform:rotateX(0deg) rotateY(0deg) rotateZ(90deg);

}

to {

transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);

}

}li {

list-style:none;

width:500px;

height:500px;

text-align:center;

line-height:500px;

position:absolute;

top:0;

left:0;

opacity:0.6;

}

/*前*/

li:nth-child(1) {

background:red;

transform:translateZ(250px);

}

/*后*/

li:nth-child(2) {

background:blueviolet;

transform:translateZ(-250px);

}

/*左*/

li:nth-child(3) {

background:blue;

transform:translateX(-250px) rotateY(90deg);

}

/*右*/

li:nth-child(4) {

background:green;

transform:translateX(250px) rotateY(90deg);

}

/*上*/

li:nth-child(5) {

background:yellow;

transform:translateY(-250px) rotateX(90deg);

}

/*下*/

li:nth-child(6) {

background:brown;

transform:translateY(250px) rotateX(90deg);

}