3D立体相册不过是冷锋蓝plus版 html+css

一.话不多，先看效果：

    转念一想，好像很久很久没出css特效的文章了，特别是工作之后，更少了。偶然翻看电脑内存的时候，发现这个自己1年多以前写的特效，甚美，又勾起我一段尘封的回忆。。。我原来也发过3D立体相册特效的，对于基础理念可以看那篇，看完再回来看这篇plus版。实现并不难，如下。
3D立体相册 html+css 的基础版。

效果：

二.具体实现：

1. 定义div标签：

 <audio src="img/123.mp3" loop autoplay>audio>
    <video class="bg" src="img/11.mp4" autoplay loop muted>video>
    <div class="container">
      <div class="little">
        <img src="img/1.jpg" alt="x" />
        <img src="img/2.jpg" alt="x" />
        <img src="img/3.jpg" alt="x" />
        <img src="img/4.jpg" alt="x" />
        <img src="img/5.jpg" alt="x" />
        <img src="img/6.jpg" alt="x" />
      div>
      <div class="large">
        <img class="lar1" src="img/1.jpg" alt="x" />
        <img class="lar2" src="img/2.jpg" alt="x" />
        <img class="lar3" src="img/3.jpg" alt="x" />
        <img class="lar4" src="img/4.jpg" alt="x" />
        <img class="lar5" src="img/5.jpg" alt="x" />
        <img class="lar6" src="img/6.jpg" alt="x" />
      div>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

其中同级目录img文件夹准备6张图片。audio与video可要可不要，加个背景音乐或背景视频更有情调~

2. 定义基本布局css：

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .container {
        position: relative;
        width: 100px;
        height: 100px;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
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

3. 里层图片盒子css：

 .little {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(12deg) rotateY(-28deg);
        animation: turn 6s linear infinite;
      }
      @keyframes turn {
        100% {
          transform: rotateX(12deg) rotateY(-388deg);
        }
      }
      .little img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .little img:nth-child(1) {
        transform: translateZ(50px);
      }
      .little img:nth-child(2) {
        transform: rotateY(180deg) translateZ(50px);
      }
      .little img:nth-child(3) {
        transform: rotateY(-90deg) translateZ(50px);
      }
      .little img:nth-child(4) {
        transform: rotateY(90deg) translateZ(50px);
      }
      .little img:nth-child(5) {
        transform: rotateX(90deg) translateZ(50px);
      }
      .little img:nth-child(6) {
        transform: rotateX(90deg) translateZ(-50px);
      }
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

4.外层图片css：

  .large {
        position: absolute;
        top: -50px;
        left: -50px;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(12deg) rotateY(-28deg);
        animation: turn2 6s linear infinite;
      }
      @keyframes turn2 {
        100% {
          transform: rotateX(12deg) rotateY(-388deg);
        }
      }
      .large img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
        border: 0.1px solid white;
        transition: all 1s;
      }
      .large img:nth-child(1) {
        transform: translateZ(100px);
      }
      .large img:nth-child(2) {
        transform: rotateY(180deg) translateZ(100px);
      }
      .large img:nth-child(3) {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .large img:nth-child(4) {
        transform: rotateY(90deg) translateZ(100px);
      }
      .large img:nth-child(5) {
        transform: rotateX(90deg) translateZ(100px);
      }
      .large img:nth-child(6) {
        transform: rotateX(90deg) translateZ(-100px);
      }
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

5. 鼠标移入触碰css：

  .container:hover .lar1 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: translateZ(250px);
      }
      .container:hover .lar2 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(180deg) translateZ(250px);
      }
      .container:hover .lar3 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(-90deg) translateZ(250px);
      }
      .container:hover .lar4 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(90deg) translateZ(250px);
      }
      .container:hover .lar5 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateX(90deg) translateZ(250px);
      }
      .container:hover .lar6 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateX(90deg) translateZ(-250px);
      }
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
48

三.完整代码：

DOCTYPE html>
<html lang="zh-CN">
  <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>Documenttitle>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .container {
        position: relative;
        width: 100px;
        height: 100px;
        perspective: 1000px;
        transform-style: preserve-3d;
      }

      .little {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(12deg) rotateY(-28deg);
        animation: turn 6s linear infinite;
      }
      @keyframes turn {
        100% {
          transform: rotateX(12deg) rotateY(-388deg);
        }
      }
      .little img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .little img:nth-child(1) {
        transform: translateZ(50px);
      }
      .little img:nth-child(2) {
        transform: rotateY(180deg) translateZ(50px);
      }
      .little img:nth-child(3) {
        transform: rotateY(-90deg) translateZ(50px);
      }
      .little img:nth-child(4) {
        transform: rotateY(90deg) translateZ(50px);
      }
      .little img:nth-child(5) {
        transform: rotateX(90deg) translateZ(50px);
      }
      .little img:nth-child(6) {
        transform: rotateX(90deg) translateZ(-50px);
      }

      .large {
        position: absolute;
        top: -50px;
        left: -50px;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(12deg) rotateY(-28deg);
        animation: turn2 6s linear infinite;
      }
      @keyframes turn2 {
        100% {
          transform: rotateX(12deg) rotateY(-388deg);
        }
      }
      .large img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
        border: 0.1px solid white;
        transition: all 1s;
      }
      .large img:nth-child(1) {
        transform: translateZ(100px);
      }
      .large img:nth-child(2) {
        transform: rotateY(180deg) translateZ(100px);
      }
      .large img:nth-child(3) {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .large img:nth-child(4) {
        transform: rotateY(90deg) translateZ(100px);
      }
      .large img:nth-child(5) {
        transform: rotateX(90deg) translateZ(100px);
      }
      .large img:nth-child(6) {
        transform: rotateX(90deg) translateZ(-100px);
      }

      .container:hover .lar1 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: translateZ(250px);
      }
      .container:hover .lar2 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(180deg) translateZ(250px);
      }
      .container:hover .lar3 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(-90deg) translateZ(250px);
      }
      .container:hover .lar4 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateY(90deg) translateZ(250px);
      }
      .container:hover .lar5 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateX(90deg) translateZ(250px);
      }
      .container:hover .lar6 {
        left: -90px;
        top: -90px;
        width: 380px;
        height: 380px;
        opacity: 1;
        transform: rotateX(90deg) translateZ(-250px);
      }
    style>
  head>
  <body>
    <audio src="img/123.mp3" loop autoplay>audio>
    <video class="bg" src="img/11.mp4" autoplay loop muted>video>
    <div class="container">
      <div class="little">
        <img src="img/1.jpg" alt="x" />
        <img src="img/2.jpg" alt="x" />
        <img src="img/3.jpg" alt="x" />
        <img src="img/4.jpg" alt="x" />
        <img src="img/5.jpg" alt="x" />
        <img src="img/6.jpg" alt="x" />
      div>
      <div class="large">
        <img class="lar1" src="img/1.jpg" alt="x" />
        <img class="lar2" src="img/2.jpg" alt="x" />
        <img class="lar3" src="img/3.jpg" alt="x" />
        <img class="lar4" src="img/4.jpg" alt="x" />
        <img class="lar5" src="img/5.jpg" alt="x" />
        <img class="lar6" src="img/6.jpg" alt="x" />
      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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

结语：

“逝者如斯夫，不舍昼夜。” 人生世事变化之快。不知疫情何时才能结束。

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~