使用html制作3D循环相册_html缩略图循环相册效果

作者：凡人多烦事01 | 2024-02-21 23:55:02

踩

html缩略图循环相册效果

使用 html 制作简单3D循环相册

注： img 标签中的 src 属性为你图片资源路径

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Love</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}

        .wrap{width: 600px;height: 400px;margin: 200px auto;}
        .box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
        .box>div{width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}

        .box img{width: 200px;height: 200px;}

        .left{transform: rotateY(90deg) translateZ(-100px);}
        .right{transform: rotateY(90deg) translateZ(100px);}
        .top{transform: rotateX(90deg) translateZ(100px);}
        .bottom{transform: rotateX(90deg) translateZ(-100px);}
        .after{transform: translateZ(-100px);}
        .before{transform: translateZ(100px);}

        .wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
        .wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
        .wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
        .wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
        .wrap .box:hover .after{transform: translateZ(-160px);}
        .wrap .box:hover .before{transform: translateZ(160px);}

        @keyframes move{
            from{transform: rotateX(0deg) rotateY(0deg);}
            to{transform: rotateX(13deg) rotateY(280deg);}
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <div class="left"><img src="img/1.jpg" alt=""></div>
        <div class="right"><img src="img/2.jpg" alt=""></div>
        <div class="top"><img src="img/3.jpg" alt=""></div>
        <div class="bottom"><img src="img/4.jpg" alt=""></div>
        <div class="after"><img src="img/5.jpg" alt=""></div>
        <div class="before"><img src="img/6.jpg" alt=""></div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

alt="">

```

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/127398?site