【前端三剑客实现3D相册~爱她，就为她做一个3D相册吧！！！】

创建一个3D相册盒子效果的HTML页面

引言

在网页设计中，3D效果总能吸引用户的注意力，提升用户体验。本文介绍如何使用HTML、CSS和JavaScript创建一个3D相册盒子效果。这个效果不仅包含了3D旋转和缩放动画，还结合了花瓣飘落的效果，使得整个页面更加生动有趣。
运行视频

3D相册

一、技术栈

本项目使用的技术栈只有前端三剑客：

1. HTML： 用于构建页面的基本结构。
2. CSS： 用于样式设计，包括布局、动画和交互效果。
3. JavaScript： 用于动态效果，如花瓣的飘落和3D相册盒子的旋转。

二、页面结构

页面的基本结构包括一个container容器和一个box容器。container容器用于放置花瓣飘落效果的画布，而box容器用于放置3D相册盒子。

<div class="container">div>
<div class="box">
    <ul class="minbox">
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
    <ol class="maxbox">
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ol>
div>

三、样式设计

1. 通用样式： 首先，设置HTML和body的宽度和高度为100%，去除默认的外边距和内边距，并隐藏溢出内容。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

2. 容器样式： .container容器设置为绝对定位，背景颜色为黑色，用于放置花瓣飘落效果的画布。

.container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
    position: absolute;
}

3. 相册盒子样式： .box容器设置了宽高、背景图片、位置、3D变换和动画效果。

.box {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    transform-style: preserve-3d;
    transform: rotateX(13deg);
    animation: move 7s linear infinite;
    z-index: 999;
}

4. 相册图片样式： .minbox和.maxbox分别用于放置小图和大图，设置了各自的宽高、位置和变换效果。

.minbox {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 30px;
    transform-style: preserve-3d;
}

.maxbox {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    transform-style: preserve-3d;
    cursor: pointer;
}

5. 动画效果： 使用@keyframes定义了move动画，使相册盒子在X轴上旋转。

@keyframes move {
    0% {
        transform: rotateX(13deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(13deg) rotateY(360deg);
    }
}

四、JavaScript逻辑

JavaScript部分主要用于实现花瓣飘落效果。RENDERER对象负责初始化、设置参数、重建方法和创建花瓣。CHERRY_BLOSSOM构造函数用于创建每个花瓣对象，并包含花瓣的初始化、随机值生成、轴计算和渲染方法。

var RENDERER = {
    INIT_CHERRY_BLOSSOM_COUNT: 30,
    MAX_ADDING_INTERVAL: 10,

    init: function () {
        this.setParameters();
        this.reconstructMethods();
        this.createCherries();
        this.render();
    },
    // 其他方法...
};

var CHERRY_BLOSSOM = function (renderer, isRandom) {
    this.renderer = renderer;
    this.init(isRandom);
};

CHERRY_BLOSSOM.prototype = {
    FOCUS_POSITION: 300,
    FAR_LIMIT: 600,
    MAX_RIPPLE_COUNT: 100,
    RIPPLE_RADIUS: 100,
    SURFACE_RATE: 0.5,
    SINK_OFFSET: 20,

    init: function (isRandom) {
        // 初始化花瓣的属性...
    },
    // 其他方法...
};

$(function () {
    RENDERER.init();
});

五、总结

本文通过HTML、CSS和JavaScript实现了一个包含3D相册盒子和花瓣飘落效果的网页。3D相册盒子通过CSS的3D变换和动画效果实现，而花瓣飘落效果则通过JavaScript动态生成和渲染。这个效果不仅美观，而且具有很强的互动性，可以大大提升用户的浏览体验。

希望这篇文章能够帮助你理解如何创建一个类似的3D相册盒子效果，并在你的项目中加以应用。如果你有任何问题或建议，欢迎在评论区留言。

完整源码获取，私信了解更多！！！