用css如何写正方体,css3纯写的立方体

.box {

width:200px;

height:200px;

transform-style:preserve-3d;

position:relative;

margin:100px auto 20px;

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

cursor:pointer;

transition:all 1s;

}

.box:hover {

transform:rotateX(20deg) rotateY(230deg)

}

.box div {

width:200px;

height:200px;

text-align:center;

line-height:200px;

font-size:100px;

font-weight:bolder;

color:#fff;

/* 让6个面全部定位在父元素里面 */

position:absolute;

left:0;

top:0;

opacity:0.5;

/* 透明 */

border:2px solid #000;

transition:all 1s ease;

}

.box div:nth-child(1) {

transform:translateZ(100px);

background-color:rgba(36,85,75,0.5);

}

.box:hover div:nth-child(1) {

transform:translateY(100px) translateZ(100px);

}

.box div:nth-child(2) {

transform:translateZ(-100px) rotateY(180deg);

background-color:rgba(36,255,1,0.5);

}

.box:hover div:nth-child(2) {

transform:translateZ(-100px) translateY(100px) rotateY(180deg);

}

.box div:nth-child(3) {

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

background-color:rgba(25,62,75,0.5);

}

.box:hover div:nth-child(3) {

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

}

.box div:nth-child(4) {

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

background-color:rgba(25,62,75,0.5);

}

.box:hover div:nth-child(4) {

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

}

.box div:nth-child(5) {

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

background-color:rgba(255,62,26,0.5);

}

.box:hover div:nth-child(5) {

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

}

.box div:nth-child(6) {

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

background-color:rgba(255,62,26,0.5);

}

.box:hover div:nth-child(6) {

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

}