3d相册源码

炫阳科技工作室

已于 2023-05-29 17:08:00 修改

阅读量892

点赞数

于 2021-08-22 23:06:34 首次发布

本文链接：https://blog.csdn.net/asdsdfty/article/details/119859746

版权

CSS3 3D动画翻转效果关键帧动画图片变换

关键词由CSDN通过智能技术生成

毕设2921709778，收费定制；已经退出csdn 掘金地址https://juejin.cn/user/3206589365619767

html

<body>
    <div class="box">`
        <div class="boxs">
            <img src="./img/wz01.png" alt="" class="img img1">
            <img src="./img/wz02.png" alt="" class="img img2">
            <img src="./img/wz03.png" alt="" class="img img3">
            <img src="./img/wz04.png" alt="" class="img img4">
            <img src="./img/wz05.png" alt="" class="img img5">
            <img src="./img/wz06.png" alt="" class="img img6">
            <img src="./img/wz07.png" alt="" class="img img7">
            <img src="./img/wz08.png" alt="" class="img img8">
            <img src="./img/wz09.png" alt="" class="img img9">
            <img src="./img/wz10.png" alt="" class="img img10">
            <img src="./img/wz11.png" alt="" class="img img11">
            <img src="./img/wz12.png" alt="" class="img img12">
        </div>
    </div>
</body>

css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: cadetblue;
}

.box {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 0vh;
    width: 100%;
    perspective: 800;
    animation: xy 2s 3s linear forwards;
}

.boxs {
    transform: rotateX(-30deg);
    position: absolute;
    width: 200px;
    height: 100px;
    /* background-color: aquamarine; */
    transform-style: preserve-3d;
    animation: xz1 5s linear forwards, boxs 1s 5s linear forwards, xuanzhuan 15s 6s linear infinite;
}

@keyframes boxs {
    0% {
        transform: rotateX(-30deg);
        height: 100px;
    }
    100% {
        transform: rotateX(0deg);
        height: 200px;
    }
}

img {
    transform-style: preserve-3d;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: img 1s 5s linear forwards;
}

@keyframes img {
    0% {
        height: 100px;
    }
    100% {
        height: 200px;
    }
}

.img1 {
    transform: rotateY(0deg) translateZ(300px);
    animation: img1 linear 3s 5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img1 {
    0% {
        transform: rotateY(0deg) translateZ(300px);
    }
    100% {
        transform: rotateX(90deg) translateZ(-150px);
    }
}

.img2 {
    transform: rotateY(40deg) translateZ(300px);
    animation: img2 linear 3s 5.5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img2 {
    0% {
        transform: rotateY(40deg) translateZ(300px);
    }
    100% {
        transform: rotateX(90deg) translateZ(150px);
    }
}

.img3 {
    transform: rotateY(80deg) translateZ(300px);
    animation: img3 linear 3s 6s forwards, touming1 2s 12s linear forwards;
}

@keyframes img3 {
    0% {
        transform: rotateY(80deg) translateZ(300px);
    }
    100% {
        transform: rotateY(90deg) translateZ(-150px);
    }
}

.img4 {
    transform: rotateY(120deg) translateZ(300px);
    animation: img4 linear 3s 6.5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img4 {
    0% {
        transform: rotateY(120deg) translateZ(300px);
    }
    100% {
        transform: translateX(150px) rotateY(90deg);
    }
}

.img5 {
    transform: rotateY(160deg) translateZ(300px);
    animation: img5 linear 3s 7s forwards, touming1 2s 12s linear forwards;
}

@keyframes img5 {
    0% {
        transform: rotateY(160deg) translateZ(300px);
    }
    100% {
        transform: rotateZ(90deg) translateZ(-150px);
    }
}

.img6 {
    transform: rotateY(200deg) translateZ(300px);
    animation: img6 linear 3s 7.5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img6 {
    0% {
        transform: rotateY(200deg) translateZ(300px);
    }
    100% {
        transform: rotateZ(90deg) translateZ(150px);
    }
}

.img7 {
    transform: rotateY(240deg) translateZ(300px);
    animation: img7 linear 3s 8s forwards, touming1 2s 12s linear forwards;
}

@keyframes img7 {
    0% {
        transform: rotateY(240deg) translateZ(300px) scale(1);
    }
    100% {
        transform: rotateX(90deg) translateZ(-60px) scale(0.6);
    }
}

.img8 {
    transform: rotateY(280deg) translateZ(300px);
    animation: img8 linear 3s 8.5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img8 {
    0% {
        transform: rotateY(280deg) translateZ(300px) scale(1);
    }
    100% {
        transform: rotateX(90deg) translateZ(60px) scale(0.6);
    }
}

.img9 {
    transform: rotateY(320deg) translateZ(300px);
    animation: img9 linear 3s 9s forwards, touming1 2s 12s linear forwards;
}

@keyframes img9 {
    0% {
        transform: rotateY(320deg) translateZ(300px) scale(1);
    }
    100% {
        transform: rotateY(90deg) translateZ(-60px) scale(0.6);
    }
}

.img10 {
    transform: rotateY(0deg) translateZ(0px);
    animation: img10 linear 3s 10s forwards, touming1 2s 12s linear forwards;
}

@keyframes img10 {
    0% {
        transform: rotateY(0deg) translateZ(0px) scale(1);
    }
    100% {
        transform: rotateY(90deg) translateZ(60px) scale(0.6);
    }
}

.img11 {
    transform: rotateY(0deg) translateZ(0px);
    animation: img11 linear 3s 10.5s forwards, touming1 2s 12s linear forwards;
}

@keyframes img11 {
    0% {
        transform: rotateY(0deg) translateZ(0px) scale(1);
    }
    100% {
        transform: rotateZ(90deg) translateZ(-60px) scale(0.6);
    }
}

.img12 {
    transform: rotateY(0deg) translateZ(0px);
    animation: img12 linear 3s 11s forwards, touming1 2s 12s linear forwards;
}

@keyframes img12 {
    0% {
        transform: rotateY(0deg) translateZ(0px) scale(1);
    }
    100% {
        transform: rotateZ(90deg) translateZ(60px) scale(0.6);
    }
}

@keyframes xz1 {
    0% {
        transform: rotateX(-20deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(-20deg) rotateY(36deg);
    }
    20% {
        transform: rotateX(-20deg) rotateY(72deg);
    }
    30% {
        transform: rotateX(-20deg) rotateY(108deg);
    }
    40% {
        transform: rotateX(-20deg) rotateY(144deg);
    }
    50% {
        transform: rotateX(-20deg) rotateY(180deg);
    }
    60% {
        transform: rotateX(-20deg) rotateY(216deg);
    }
    70% {
        transform: rotateX(-20deg) rotateY(252deg);
    }
    80% {
        transform: rotateX(-20deg) rotateY(288deg);
    }
    90% {
        transform: rotateX(-20deg) rotateY(324deg);
    }
    100% {
        transform: rotateX(-20deg) rotateY(360deg);
    }
}

@keyframes xy {
    0% {
        top: 0vh;
    }
    50% {
        top: 60vh;
    }
    100% {
        top: 40vh;
    }
}

@keyframes xuanzhuan {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes touming1 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

炫阳科技工作室

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
3d相册源码

html<body> <div class="box">` <div class="boxs"> <img src="./img/wz01.png" alt="" class="img img1"> <img src="./img/wz02.png" alt="" class="img img2"> <img src="./img/wz03.pn
复制链接

扫一扫