css3完成图片3d立体旋转效果

心已赠人 2021-11-29 14:56 529阅读 0赞

.cuboidBox { 
        width: 100%;
        height: 86%;
        position: absolute;
        transform: translate3d(0, -1000px, 0);
        transform-style: preserve-3d;
        animation: cuboidInDown 2s 2s linear forwards, rotateCuboid 12s 4s linear forwards infinite; .cuboidFace { 
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            width: 600rpx;
            height: 100%; .mold2_img{ 
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .frontFace { 
            transform: translateZ(300rpx);
        }
        .backFace { 
            transform: rotateX(0deg) translateZ(-300rpx) scale(-1, 1);
        }
        .leftFace { 
            transform: rotateY(-90deg) translateZ(300rpx);
        }
        .rightFace { 
            transform: rotateY(90deg) translateZ(300rpx);
        }
    }
    @keyframes cuboidInDown { 
        0% { 
            top: 10%;
            transform: translate3d(0, -1000px, 0) rotateY(30deg) scale(.6);
        }
        100% { 
            top: 10%;
            transform: translate3d(0, 0, 0)  rotateY(0deg)  scale(.6);
        }
    }
    @keyframes rotateCuboid { 
        0% { 
            top: 10%;
            transform: rotateX(6deg) rotateY(0deg) scale(.6);
        }
        50% { 
            top: 10%;
            transform: rotateX(6deg) rotateY(180deg) scale(1);
        }
        100% { 
            top: 10%;
            transform: rotateX(6deg) rotateY(360deg) scale(.6);
        }
    }