HTML+CSS 3D立体相册（可复制源代码）

效果演示

10月19日.gif

实现了一个3D立体旋转相册的效果，包括一个容器（.container）、一个外部盒子（.out-div）、一个内部盒子（.in-div）和一个旋转动画（@keyframes）。外部盒子和内部盒子都包含一张图片，通过旋转和移动实现立体效果。整个容器背景使用径向渐变色实现，使其看起来更加美观。

Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D立体相册</title>
    <link rel="stylesheet" href="./41-3D立体相册.css">
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="out-div out-front">
                <img src="./images/1.jpg" alt="">
            </div>
            <div class="out-div out-back">
                <img src="./images/2.jpg" alt="">
            </div>
            <div class="out-div out-left">
                <img src="./images/3.jpg" alt="">
            </div>
            <div class="out-div out-right">
                <img src="./images/4.jpg" alt="">
            </div>
            <div class="out-div out-top">
                <img src="./images/5.jpg" alt="">
            </div>
            <div class="out-div out-bottom">
                <img src="./images/6.jpg" alt="">
            </div>

            <div class="in-div in-front">
                <img src="./images/3.jpg" alt="">
            </div>
            <div class="in-div in-back">
                <img src="./images/4.jpg" alt="">
            </div>
            <div class="in-div in-left">
                <img src="./images/5.jpg" alt="">
            </div>
            <div class="in-div in-right">
                <img src="./images/6.jpg" alt="">
            </div>
            <div class="in-div in-top">
                <img src="./images/7.jpg" alt="">
            </div>
            <div class="in-div in-bottom">
                <img src="./images/8.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #333, #000);
}

.container {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.out-div img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.in-div img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.box {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotateAnimate 10s linear infinite;
    cursor: pointer
}

.out-div {
    width: 200px;
    height: 200px;
    position: absolute;
    transition: transform 1s ease-in;
}

.out-front {
    transform: translateZ(100px);
}

.out-back {
    transform: translateZ(-100px) rotateY(180deg);
}

.out-left {
    transform: translateX(-100px) rotateY(-90deg);
}

.out-right {
    transform: translateX(100px) rotateY(90deg);
}

.out-top {
    transform: translateY(-100px) rotateX(90deg);
}

.out-bottom {
    transform: translateY(100px) rotateX(-90deg);
}

.container:hover .out-front {
    transform: translateZ(200px);
}

.container:hover .out-back {
    transform: translateZ(-200px) rotateY(180deg);
}

.container:hover .out-left {
    transform: translateX(-200px) rotateY(-90deg);
}

.container:hover .out-right {
    transform: translateX(200px) rotateY(90deg);
}

.container:hover .out-top {
    transform: translateY(-200px) rotateX(90deg);
}

.container:hover .out-bottom {
    transform: translateY(200px) rotateX(-90deg);
}

.in-div {
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 100px;
    position: absolute;
}

.in-front {
    transform: translateZ(50px);
}

.in-back {
    transform: translateZ(-50px) rotateY(180deg);
}

.in-left {
    transform: translateX(-50px) rotateY(-90deg);
}

.in-right {
    transform: translateX(50px) rotateY(90deg);
}

.in-top {
    transform: translateY(-50px) rotateX(90deg);
}

.in-bottom {
    transform: translateY(50px) rotateX(-90deg);
}

@keyframes rotateAnimate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

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

实现思路拆分

* {
    margin: 0;
    padding: 0;
}

这段代码是设置所有元素的外边距和内边距为0。

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #333, #000);
}

这段代码是设置body元素的高度为100vh，使用flex布局，使其水平和垂直居中。同时设置背景颜色为径向渐变色，从#333到#000。

.container {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

这段代码是设置容器的宽度和高度为500px，使用flex布局，使其水平和垂直居中。

.out-div img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

这段代码是设置外部盒子中图片的宽度和高度为200px，使用cover属性使其自适应。

.in-div img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

这段代码是设置内部盒子中图片的宽度和高度为100px，使用cover属性使其自适应。

.box {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotateAnimate 10s linear infinite;
    cursor: pointer
}

这段代码是设置盒子的布局方式为绝对定位，宽度和高度为200px，使用preserve-3d属性使其保持3D效果。同时设置旋转动画为rotateAnimate，持续时间为10s，线性变化，无限循环。并且设置鼠标指针为手型。

.out-div {
    width: 200px;
    height: 200px;
    position: absolute;
    transition: transform 1s ease-in;
}

这段代码是设置外部盒子的宽度和高度为200px，相对定位，过渡效果为1s的缓入缓出效果。

.out-front {
    transform: translateZ(100px);
}

.out-back {
    transform: translateZ(-100px) rotateY(180deg);
}

.out-left {
    transform: translateX(-100px) rotateY(-90deg);
}

.out-right {
    transform: translateX(100px) rotateY(90deg);
}

.out-top {
    transform: translateY(-100px) rotateX(90deg);
}

.out-bottom {
    transform: translateY(100px) rotateX(-90deg);
}

这段代码是设置外部盒子的六个面的位置和旋转角度。前面的位置为translateZ(100px)，后面的位置为translateZ(-100px) rotateY(180deg)，左侧的位置为translateX(-100px) rotateY(-90deg)，右侧的位置为translateX(100px) rotateY(90deg)，顶部的位置为translateY(-100px) rotateX(90deg)，底部的位置为translateY(100px) rotateX(-90deg)。

.container:hover .out-front {
    transform: translateZ(200px);
}

.container:hover .out-back {
    transform: translateZ(-200px) rotateY(180deg);
}

.container:hover .out-left {
    transform: translateX(-200px) rotateY(-90deg);
}

.container:hover .out-right {
    transform: translateX(200px) rotateY(90deg);
}

.container:hover .out-top {
    transform: translateY(-200px) rotateX(90deg);
}

.container:hover .out-bottom {
    transform: translateY(200px) rotateX(-90deg);
}

这段代码是设置当鼠标悬停在容器上时，外部盒子的六个面的位置和旋转角度。前面的位置为translateZ(200px)，后面的位置为translateZ(-200px) rotateY(180deg)，左侧的位置为translateX(-200px) rotateY(-90deg)，右侧的位置为translateX(200px) rotateY(90deg)，顶部的位置为translateY(-200px) rotateX(90deg)，底部的位置为translateY(200px) rotateX(-90deg)。

.in-div {
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 100px;
    position: absolute;
}

这段代码是设置内部盒子的左侧外边距为50px，顶部外边距为50px，宽度和高度为100px，相对定位。

.in-front {
    transform: translateZ(50px);
}

.in-back {
    transform: translateZ(-50px) rotateY(180deg);
}

.in-left {
    transform: translateX(-50px) rotateY(-90deg);
}

.in-right {
    transform: translateX(50px) rotateY(90deg);
}

.in-top {
    transform: translateY(-50px) rotateX(90deg);
}

.in-bottom {
    transform: translateY(50px) rotateX(-90deg);
}

这段代码是设置内部盒子的六个面的位置和旋转角度。前面的位置为translateZ(50px)，后面的位置为translateZ(-50px) rotateY(180deg)，左侧的位置为translateX(-50px) rotateY(-90deg)，右侧的位置为translateX(50px) rotateY(90deg)，顶部的位置为translateY(-50px) rotateX(90deg)，底部的位置为translateY(50px) rotateX(-90deg)。

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

这段代码是设置旋转动画的关键帧。从0%到100%分别设置三个旋转角度，使盒子在三个方向上旋转360度。