魔方(小玩具)

*{

padding: 0;

margin: 0;

}

height: 100%;

}

body{

position: relative;

perspective: 1000px;

}

 

 

.wrap{

width: 240px;

height: 240px;

/*border: 1px solid red;*/

position: absolute;

top: 50%;

left: 50%;

margin-left: -120px;

margin-top: -120px;

transform-style: preserve-3d;

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

transition: all 100s linear;

 

 

 

 

}

.wrap:hover{

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

}

.wrap div{

width: 240px;

height: 240px;

position: absolute;

top: 0;

left: 0;

 

 

 

 

}

img{

width: 100%;

height: 100%;

border-radius: 40px;

opacity: 0.8;

}

 

.wrap div:nth-child(1){

transform: rotateY(90deg) translateZ(120px);

 

}

.wrap div:nth-child(2){

transform: rotateY(0deg) translateZ(120px);

 

}

.wrap div:nth-child(3){

transform: rotateY(0deg) translateZ(-120px);

 

}

.wrap div:nth-child(4){

transform: rotateY(90deg) translateZ(-120px);

 

}

.wrap div:nth-child(5){

transform: rotateX(90deg) translateZ(120px);

 

}

.wrap div:nth-child(6){

transform: rotateX(90deg) translateZ(-120px);

 

}