.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);
}