其他分享
首页 > 其他分享> > 3D动画旋转图(包含代码,图片自找)

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