3D旋转相册

字数统计: 1.8k字   |   阅读时长: 9分

正方体旋转相册

首先我们来看一下效果图


接下来我们就干起来
新建一些文件夹如下图所示

其中img文件就是存放图片得文件夹，music存放得是背景音乐得文件夹，CSS存放得是样式文件
下面就来贴代码
CSS得代码如下

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
html{
    background: #000;
    height: 100%;    
}
/*最外层容器样式*/
.wrap{
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    /*改变左右上下,图片方块移动*/
    
}
/*包裹所有容器样式*/
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
    -webkit-animation: rotate 40s infinite;
    /*匀速*/
    animation-timing-function: linear;
}
@-webkit-keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: all .4s;
}
/*定义所有图片样式*/
.pic{
    width: 200px;
    height: 200px;
}
.cube .out_front{
    transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
    transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
    transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
    display: bloack;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.cube .in_pic{
    width: 100px;
    height: 100px;
}
.cube .in_front{
    transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
    transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
    transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
    transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
    transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
    transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
    transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css-3d旋转</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <!--/*外层最大容器*/-->
        <div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="img/1.jpg"  class="pic"/>
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="img/2.jpg"  class="pic"/>
            </div>
            <!--左图片 -->
            <div class="out_left">
                <img src="img/3.jpg"  class="pic"/>
            </div>
            <div class="out_right">
                <img src="img/4.jpg"  class="pic"/>
            </div>
            <div class="out_top">
                <img src="img/5.jpg"  class="pic"/>
            </div>
            <div class="out_bottom">
                <img src="img/6.jpg"  class="pic"/>
            </div>
            <!--小正方体 --> 
            <span class="in_front">
                <img src="img/7.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                 <img src="img/8.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="img/9.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="img/10.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="img/11.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="img/12.jpg" class="in_pic" />
            </span>
        </div>
        </div>
        <audio src="music/你的答案.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<script>
    var bgmusic = document.getElementById('bgmusic');
    bgmusic.addEventListener('canplay', function(){
        this.play();
    }, false);
    window.addEventListener('load', function(){
        window.addEventListener('touchstart', once, false);
    }, false);
    function once(){
        bgmusic.play();
        window.removeEventListener('touchstart', once, false);
    }
    </script>
    </body>
</html>

要做得就是把上面图片得名字改成自己文件夹下得文件名就好了
下载一首音乐放入music文件夹中，把html中的音乐文件名换成自己的音乐名就OK了
大功告成了，就双击html文件在浏览器中打开。当然这里会出现一点问题，就是背景音乐没有自动播放。这是浏览器的限制，像谷歌浏览器默认是不允许自动播放的，我们可以更改一下默认设置为允许。如谷歌浏览器，输入(chrome://flags/#autoplay-policy)出现如下界面

把Autoplaypolicy设为允许，这样背景音乐就可以自动播放了

旋转相册

先来看一下效果图

步骤和上面类似，或者相对来说更简单
建立如下图所示的文件夹
img文件夹放入你想展示的图片，music文件夹放入背景音乐文件，接下来所有的代码都在如下的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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
	margin:0;
	padding:0;
}
body{
	background: black;
}
.content{
	width: 200px;
	height: 150px;
	position: relative;
	margin:200px auto 0;
	perspective: 1500px;
}
.box{
	width: 200px;
	height: 150px;
	transform-style: preserve-3d;
	transform:rotateX(-30deg);
	animation:photo 45s linear infinite;
}
.box:hover{
	animation:photo 45s linear infinite paused;
}
.box img{
	width: 200px;
	height: 150px;
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
	transition: all 1s;
}
.box img:nth-child(1){
	transform:translateZ(280px);
}
.box img:nth-child(2){
	transform:rotateY(40deg) translateZ(280px);
}
.box img:nth-child(3){
	transform:rotateY(80deg) translateZ(280px);
}
.box img:nth-child(4){
	transform:rotateY(120deg) translateZ(280px);
}
.box img:nth-child(5){
	transform:rotateY(160deg) translateZ(280px);
}
.box img:nth-child(6){
	transform:rotateY(200deg) translateZ(280px);
}
.box img:nth-child(7){
	transform:rotateY(240deg) translateZ(280px);
}
.box img:nth-child(8){
	transform:rotateY(280deg) translateZ(280px);
}
.box img:nth-child(9){
	transform:rotateY(320deg) translateZ(280px);
}
 
.box img:nth-child(1):hover{
	transform:translateZ(280px) scale(1.2);
}
.box img:nth-child(2):hover{
	transform:rotateY(40deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(3):hover{
	transform:rotateY(80deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(4):hover{
	transform:rotateY(120deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(5):hover{
	transform:rotateY(160deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(6):hover{
	transform:rotateY(200deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(7):hover{
	transform:rotateY(240deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(8):hover{
	transform:rotateY(280deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(9):hover{
	transform:rotateY(320deg) translateZ(280px) scale(1.2);
}
 
@keyframes photo{
	0%{
		transform:rotateX(-30deg) rotateY(0deg);
	}
	100%{
		transform:rotateX(-30deg) rotateY(360deg);
	}
}
</style>
</head>
<body>
<div class="content">
	<div class="box">
		<img src="img/1.jpg" alt=""/>
		<img src="img/2.jpg" alt=""/>
		<img src="img/3.jpg" alt=""/>
		<img src="img/4.jpg" alt=""/>
		<img src="img/5.jpg" alt=""/>
		<img src="img/6.jpg" alt=""/>
		<img src="img/7.jpg" alt=""/>
		<img src="img/8.jpg" alt=""/>
		<img src="img/9.jpg" alt=""/>
	</div>
</div>
<audio src="music/你的答案.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<script>
    var bgmusic = document.getElementById('bgmusic');
    bgmusic.addEventListener('canplay', function(){
        this.play();
    }, false);
    window.addEventListener('load', function(){
        window.addEventListener('touchstart', once, false);
    }, false);
    function once(){
        bgmusic.play();
        window.removeEventListener('touchstart', once, false);
    }
    </script>
</body>

</html>

同样把代码里的图片文件和音乐文件改成你自己的就好了

最终效果

可以把俩个页面录制成小视频，再通过一些视频编辑软件添加字幕，添加背景音乐，再添加点效果，就能做出非常有意义的小视频了。本人用的视频编辑用的是剪映，很方便。个人觉得剪一些小的视频用不到Pr那么大的软件。

本文作者： Mr Han
本文链接： https://linbei.top/3D%E6%97%8B%E8%BD%AC%E7%9B%B8%E5%86%8C/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信
置顶

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家