HTML 3d立体旋转相册

效果：（实际是动态旋转）目录：（根据自己需要替换图片就行了大照片是400*400 小照片是100*100）提取码：1122代码链接index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d相册</title><style

"wink

3005人浏览 · 2022-03-05 22:47:42

"wink · 2022-03-05 22:47:42 发布

效果：（实际是动态旋转）

目录：（根据自己需要替换图片就行了大照片是400*400 小照片是100*100）

提取码：1122

代码链接

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d相册</title>
    <style type="text/css">

                html,body {
                    height: 100%;

                    color: #00FF00;
                }

        </style>
</head>
<link type="text/css" href="static/css/style.css" rel="stylesheet" />
<link href="static/css/index.css" rel="stylesheet" type="text/css">
<style type="text/css">

                html,body {
                    height: 100%;

                    color: #00FF00;
                }
                body{
                    /* 背景图片 */
                    background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
                    background-size: cover;

                }
        </style>

<body>
<!-- <audio autoplay="autoplay" loop="loop" preload="auto"
自动播放音乐
            	src="static/music/所念皆山河.mp3"></audio> -->
<div class="box">
<ul class="minbox">
    <!-- 小照片 100*100 -->
<li><img src="static/images/01.jpg" width="100" height="100"></li>
<li><img src="static/images/02.jpg" width="100" height="100"></li>
<li><img src="static/images/03.jpg" width="100" height="100"></li>
<li><img src="static/images/04.jpg" width="100" height="100"></li>
<li><img src="static/images/05.jpg" width="100" height="100"></li>
<li><img src="static/images/06.jpg" width="100" height="100"></li>
</ul>
<ol class="maxbox">
    <!-- 大照片 400*400 -->
<li><img src="static/images/1.jpg" width="400" height="400"></li>
<li><img src="static/images/2.jpg" width="400" height="400"></li>
<li><img src="static/images/3.jpg" width="400" height="400"></li>
<li><img src="static/images/4.jpg" width="400" height="400"></li>
<li><img src="static/images/5.jpg" width="400" height="400"></li>
<li><img src="static/images/6.jpg" width="400" height="400"></li>
</ol>
</div>
</body>
</html>