本文最后更新于244 天前，其中的信息可能已经过时，如有错误请发送邮件到2945594404@qq.com
首先创建一个文件夹，里面再以此创建img文件夹index.html文件以及style.css文件，
结构可看下图
随后即可开始用文本方式编辑，
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>专属她的一份</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload = function() {
// 播放背景音乐
var audio = document.getElementById('bgm');
if (audio) {
audio.play().catch(error => console.log('音频播放失败', error));
}
}
</script>
</head>
<body>
<!-- 外层最大容器 -->
<div class="wrap">
<!-- 包裹所有元素的容器 -->
<div class="cube">
<!-- 前面图片 -->
<div class="out_front">
<img src="img/01.jpg" class="pic" />
</div>
<!-- 后面图片 -->
<div class="out_back">
<img src="img/1.jpg" class="pic" />
</div>
<!-- 左图片 -->
<div class="out_left">
<img src="img/02.jpg" class="pic" />
</div>
<!-- 右图片 -->
<div class="out_right">
<img src="img/2.jpg" class="pic" />
</div>
<!-- 上图片 -->
<div class="out_top">
<img src="img/03.jpg" class="pic" />
</div>
<!-- 下图片 -->
<div class="out_bottom">
<img src="img/3.jpg" class="pic" />
</div>
<!-- 小正方体 -->
<span class="in_front">
<img src="img/04.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/4.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/05.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/5.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/06.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/6.jpg" class="in_pic" />
</span>
</div>
</div>
<!-- 添加背景音乐 -->
<audio id="bgm" autoplay loop>
<source src="music/山楂树の恋.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
style.css：
html {
background: #000;
height: 100%;
}
/* 最外层容器样式 */
.wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 360px; /* 放大3倍后的宽度 */
height: 360px; /* 放大3倍后的高度 */
margin: auto;
}
/* 包裹所有容器样式 */
.cube {
width: 360px; /* 放大3倍后的宽度 */
height: 360px; /* 放大3倍后的高度 */
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-30deg);
animation: rotate 20s infinite linear;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div, .cube span {
position: absolute;
width: 360px; /* 放大3倍后的宽度 */
height: 360px; /* 放大3倍后的高度 */
opacity: 0.8;
transition: all 0.4s;
}
.pic, .in_pic {
width: 100%;
height: 100%;
}
/* 外层立方体的6个面 */
.cube .out_front {
transform: rotateY(0deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
.cube .out_back {
transform: rotateY(180deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
.cube .out_right {
transform: rotateY(90deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
.cube .out_top {
transform: rotateX(90deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(180px); /* 放大3倍后的 Z 轴位置 */
}
/* 内层小正方体的6个面 */
.cube span {
display: block;
width: 180px; /* 放大3倍后的宽度 */
height: 180px; /* 放大3倍后的高度 */
top: 90px; /* 调整位置 */
left: 90px; /* 调整位置 */
}
.cube .in_front {
transform: rotateY(0deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
.cube .in_back {
transform: rotateY(180deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
.cube .in_right {
transform: rotateY(90deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
.cube .in_top {
transform: rotateX(90deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(90px); /* 放大3倍后的 Z 轴位置 */
}
/* 鼠标移入后的样式 */
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
.cube:hover .out_back {
transform: rotateY(180deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(360px); /* 放大3倍后的 Z 轴位置 */
}
img文件夹里面存放的是你要展示的图片一共12张，分别以1,2,3,4,5,6和01,02,03,04,05,06文件重命名，文件后缀都是.jpg
随后保存好退出在用浏览器打开index.html文件即可成功！！
