3D动画旋转图（包含代码，图片自找）
作者：互联网
样式：
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
animation: rt 5s linear infinite;
transform-style: preserve-3d;
}
.box ul li {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background: url(pic3.webp) no-repeat;
background-size: 100px 100px;
}
.box ol li {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
transition: 2s;
opacity: 0.5;
background: url(pic2.jpeg);
background-size: 100% auto;
}
.box ul li:nth-child(1) {
transform: rotateX(90deg) translateZ(-50px);
}
.box ul li:nth-child(2) {
transform: rotateX(90deg) translateZ(50px);
}
.box ul li:nth-child(3) {
transform: rotateY(90deg) translateZ(50px);
}
.box ul li:nth-child(4) {
transform: rotateY(90deg) translateZ(-50px);
}
.box ul li:nth-child(5) {
transform: translateZ(50px);
}
.box ul li:nth-child(6) {
transform: translateZ(-50px);
}
.box ol li:nth-child(1) {
transform: rotateX(90deg) translateZ(-100px);
}
.box ol li:nth-child(2) {
transform: rotateX(90deg) translateZ(100px);
}
.box ol li:nth-child(3) {
transform: rotateY(90deg) translateZ(100px);
}
.box ol li:nth-child(4) {
transform: rotateY(90deg) translateZ(-100px);
}
.box ol li:nth-child(5) {
transform: translateZ(100px);
}
.box ol li:nth-child(6) {
transform: translateZ(-100px);
}
.box:hover ol li:nth-child(1) {
opacity: 0.9;
transform: rotateX(90deg) translateZ(-400px) scale(2);
}
.box:hover ol li:nth-child(2) {
opacity: 0.9;
transform: rotateX(90deg) translateZ(400px) scale(2);
}
.box:hover ol li:nth-child(3) {
opacity: 0.9;
transform: rotateY(90deg) translateZ(400px) scale(2);
}
.box:hover ol li:nth-child(4) {
opacity: 0.9;
transform: rotateY(90deg) translateZ(-400px) scale(2);
}
.box:hover ol li:nth-child(5) {
opacity: 0.9;
transform: translateZ(400px) scale(2);
}
.box:hover ol li:nth-child(6) {
opacity: 0.9;
background-color: yellowgreen;
transform: translateZ(-400px) scale(2);
}
@keyframes rt {
0% {
transform: rotateX(0) rotateY(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
结构：
标签：box,动画,自找,translateZ,transform,li,nth,child,3D 来源： https://blog.csdn.net/qq_56001503/article/details/120285739