css 图片3d效果代码

在网页设计中，图片3D效果可以让网页增添立体感，提升用户体验。通过CSS代码，我们可以实现很多种不同的3D效果，让图片更加生动。下面我们来看一些实现3D图片效果的CSS代码。

/* 1. 翻转效果 */
.image{
    perspective: 1000px;
    transform-style: preserve-3d;
}

.image:hover{
    transform: rotateY(180deg);
}

/* 2. 飞入效果 */
.image{
    transform: translateZ(-500px);
    opacity: 0;
}

.image:hover{
    transform: translateZ(0) rotateY(360deg);
    opacity: 1;
    transition: all 1s ease-in-out;
}

/* 3. 折叠效果 */
.image{
    perspective: 600px;
    transform-style: preserve-3d;
    transform: rotateY(-35deg);
}

.image:before{
    content: "";
    display: block;
    height: 100%;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0.2);
    transform-origin: right center;
    transition: all 0.4s ease-in-out;
    transform: rotateY(-90deg) translateZ(-300px);
}

.image:hover:before{
    transform: rotateY(0deg) translateZ(-50px);
}

/* 4. 展开效果 */
.image{
    transform: translateZ(-500px);
}

.image:hover{
    transform: translateZ(0);
    perspective: 1000px;
}

/* 5. 立方体效果 */
.cube{
    width: 200px;
    height: 200px;
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeSpin 4s infinite linear;
}

.cube .side{
    width: 200px;
    height: 200px;
    position: absolute;
    border: 2px solid white;
}

.cube .front{
    background-color: #F12F15;
    transform: translateZ(100px);
}

.cube .back{
    background-color: #12F189;
    transform: rotateX(180deg) translateZ(100px);
}

.cube .right{
    background-color: #CC12F1;
    transform: rotateY(90deg) translateZ(100px);
}

.cube .left{
    background-color: #F1CC12;
    transform: rotateY(-90deg) translateZ(100px);
}

.cube .top{
    background-color: #EDED00;
    transform: rotateX(90deg) translateZ(100px);
}

.cube .bottom{
    background-color: #001AED;
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes cubeSpin{
    0%{
        transform: rotateY(0deg);
    }
    25%{
        transform: rotateY(90deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    75%{
        transform: rotateY(270deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

这些CSS代码可以让我们实现不同的3D图片效果，让网页更加生动有趣，并提升用户体验。