HTML3D旋转相册-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

文章目录

序号	目录
1	HTML满屏跳动的爱心（可写字）
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节快乐
5	HTML蓝色爱心射线
6	HTML跳动的爱心（简易版）
7	HTML粒子爱心
8	HTML蓝色动态爱心
9	HTML跳动的爱心（双心版）
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML龙年大吉
20	HTML圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML流光爱心
34	HTML3D旋转相册

写在前面

本期博主用HTML实现了3D旋转的照片墙，小伙伴们可以自行更换照片喔。

完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙</title>
</head>
 
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* 设置可视窗口的宽高 */
        body {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-color: pink;
        }
 
        .container {
            position: absolute;
            width: 1000px;
            height: 500px;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }
 
        .box {
            width: 150px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            animation: run 10s linear infinite;
        }
 
        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }
 
        /*设置图像大小、边框、圆角、位置*/
        .circle img {
            width: 250px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-sizing: border-box;
        }
 
        .circle1 {
            transform: translateZ(500px);
        }
 
        .circle2 {
            transform: rotateY(36deg) translateZ(500px);
        }
 
        .circle3 {
            transform: rotateY(72deg) translateZ(500px);
        }
 
        .circle4 {
            transform: rotateY(108deg) translateZ(500px);
        }
 
        .circle5 {
            transform: rotateY(144deg) translateZ(500px);
        }
 
        .circle6 {
            transform: rotateY(180deg) translateZ(500px);
        }
 
        .circle7 {
            transform: rotateY(216deg) translateZ(500px);
        }
 
        .circle8 {
            transform: rotateY(252deg) translateZ(500px);
        }
 
        .circle9 {
            transform: rotateY(288deg) translateZ(500px);
        }
 
        .circle10 {
            transform: rotateY(324deg) translateZ(500px);
        }
 
        @keyframes run {
            0% {
                transform: rotateY(0);
            }
 
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
 
    <body>
        <div class="container">
            <div class="box">
                <div class="circle circle1">
                    <img src="./img/1.gif" alt="">
                </div>
                <div class="circle circle2">
                    <img src="./img/2.gif" alt="">
                </div>
                <div class="circle circle3">
                    <img src="./img/3.gif" alt="">
                </div>
                <div class="circle circle4">
                    <img src="./img/4.gif" alt="">
                </div>
                <div class="circle circle5">
                    <img src="./img/5.gif" alt="">
                </div>
                <div class="circle circle6">
                    <img src="./img/6.gif" alt="">
                </div>
                <div class="circle circle7">
                    <img src="./img/7.gif" alt="">
                </div>
                <div class="circle circle8">
                    <img src="./img/8.gif" alt="">
                </div>
                <div class="circle circle9">
                    <img src="./img/9.gif" alt="">
                </div>
                <div class="circle circle10">
                    <img src="./img/10.gif" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

代码分析

这段HTML代码创建了一个三维旋转的照片墙效果。它使用了CSS3的特性来实现一个动态的视觉效果，其中包含多个图片元素在一个虚拟的圆形路径上旋转，下面是对该代码段的详细分析。

1. 文档类型声明和HTML结构

文档以<!DOCTYPE html>开始，定义了这是一个HTML5文档。整个文档结构清晰，分为<head>和<body>两部分。

2. 头部信息

在<head>部分中，设置了字符集为UTF-8，并且通过<meta>标签指定了视口（viewport）的宽度等于设备宽度，初始缩放比例为1。这使得页面能在不同尺寸的设备上正确显示。

3. 样式

在<style>标签内，定义了CSS样式：

*选择器将所有元素的外边距和内边距设置为0，并设置盒模型为border-box，这意味着元素的总宽度包括padding和border。
body的宽高被设为视窗大小，同时背景颜色被设定为粉红色。
.container类用于放置整个照片墙的容器，设置了绝对定位，并将其居中显示于页面中央。
.box类是旋转动画的主体，其宽度和高度固定，并具有相对定位，动画效果由animation属性控制。
.circle类代表每个图像块的位置，每个.circle都有不同的transform值，用于模拟它们在3D空间中的位置。
.circle img设置了图像的大小、边框、圆角等样式。
每个.circle子类（如.circle1、.circle2等）定义了不同的旋转角度，这些角度确保了图像在3D空间中的均匀分布。
@keyframes run定义了一个关键帧动画，使.box类内的元素能够绕Y轴旋转一周。

4. 页面内容

<body>部分包含了实际的内容。<div class="container">作为容器，内部有一个<div class="box">，该<div>中包含10个.circle元素，每个.circle中都包含一个图像元素。

5. 动态效果

当页面加载时，.box类会执行run动画，该动画是一个无限循环的旋转动画，这使得所有的.circle元素看起来像是围绕着一个中心点在转动，形成了一个动态的3D照片墙效果。

6. 图片资源

代码假设在./img/目录下存在从1.gif到10.gif的10张图像文件。这些图像文件应该存在于相应的目录下，否则页面将无法正确显示这些图像。

总结

这个HTML页面展示了如何利用CSS3的3D变换和动画特性来创建一个美观且互动性强的3D照片墙效果。它不仅提供了一个视觉上的享受，也展示了一些高级CSS技巧的应用，如3D变换、关键帧动画等。这样的设计可以用于网站的主页装饰、作品展示等多个场景。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

HTML3D旋转相册