欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

魔方(小玩具)

程序员文章站 2022-05-09 10:21:43
...
魔方(小玩具)

魔方(小玩具)

*{

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

}

魔方(小玩具)

魔方(小玩具)

魔方(小玩具)

魔方(小玩具)

魔方(小玩具)

魔方(小玩具)

相关标签: 魔方(小玩具)