@keyframes xuanz {
0% {
transform:rotateY(0deg) rotatex(15deg);
}
100% {
transform:rotateY(360deg) rotatex(15deg);
}
}.wt {
perspective:800px;
}
.d1 {
transform-style:preserve-3d;
position:relative;
width:200px;
height:200px;
margin:400px auto;
animation:xuanz 10s infinite linear;
}
.d1 div {
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
}
.d1 div:nth-child(1) {
transform:translatez(-100px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(2) {
transform:rotateY(90deg) translatez(-100px);
background:url(https://www.jq22.com/img/cs/500x500-2.png) 0 -50PX /cover;
}
.d1 div:nth-child(3) {
transform:rotateY(90deg) translatez(100px);
background:url(https://www.jq22.com/img/cs/500x500-3.png) 0 -50PX /cover;
}
.d1 div:nth-child(4) {
transform:rotatex(-90deg) translatez(100px);
background:url(https://www.jq22.com/img/cs/500x500-4.png) 0 -50PX /cover;
}
.d1 div:nth-child(5) {
transform:rotatex(-90deg) translatez(-100px);
background:url(https://www.jq22.com/img/cs/500x500-6.png) 0 -50PX /cover;
}
.d1 div:nth-child(6) {
transform:translatez(100px);
background:url(https://www.jq22.com/img/cs/500x500-5.png) 0 -10PX /cover;
}
.d1 div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) {
width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
opacity:0.3;
transition:transform 1s;
}
.d1 div:nth-child(7) {
transform:translatez(-150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(8) {
transform:rotateY(90deg) translatez(-150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(9) {
transform:rotateY(90deg) translatez(150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(10) {
transform:rotatex(-90deg) translatez(150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(11) {
transform:rotatex(-90deg) translatez(-150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.d1 div:nth-child(12) {
transform:translatez(150px);
background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -10PX /cover;
}
body:hover div:nth-child(7) {
transform:translatez(-300px) scale(1.2);
opacity:0.8;
}
.wt:hover div:nth-child(8) {
transform:rotateY(90deg) translatez(-300px) scale(1.2);
opacity:0.8;
}
.wt:hover div:nth-child(9) {
transform:rotateY(90deg) translatez(300px) scale(1.2);
opacity:0.8;
}
.wt:hover div:nth-child(10) {
transform:rotatex(-90deg) translatez(300px) scale(1.2);
opacity:0.8;
}
.wt:hover div:nth-child(11) {
transform:rotatex(-90deg) translatez(-300px) scale(1.2);
opacity:0.8;
}
.wt:hover div:nth-child(12) {
transform:translatez(300px) scale(1.2);
opacity:0.8;
}
更新时间:2021-06-11 01:35:22
代码自己写的,最简单的3d效果