3D立体旋转相册？
相信好多程序员都会制作一个3D旋转相册来送给自己的女朋友，或许这就是程序员的浪漫吧，那么你会不会也想自己手动敲出那些炫酷的代码呢？
今天小编就分享3d旋转相册的炫酷代码，废话不多说，只要一台电脑就可以实现，还请大家多多支持哦！小编也祝你和你的那个他（她）有情人终成眷属哦。
废话不多说，整活
1.首先建一个文件夹
2.在这个文件夹中，再创建一个文件夹img，用来存放要使用的图片，同级目录下还需创建一个文档。注意的是需要将文档后缀名改为html，如图所示
3.将你需要的图片放在img文件夹里面
4.然后在index.html拖到vscode里面进行编辑，复制以下代码
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
perspective: 800px;
}
section {
width: 300px;
height: 200px;
margin: 400px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
background-image: url(./img/d8a11469cd936689a6248e8943c5ce22.jpg);
background-size: contain;
}
section:hover{
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
div:nth-child(1) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform: translateZ(500px);
}
div:nth-child(2) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(60deg) translateZ(500px);
}
div:nth-child(3) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(120deg) translateZ(500px);
}
div:nth-child(4) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(180deg) translateZ(500px);
}
div:nth-child(5) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(240deg) translateZ(500px);
}
div:nth-child(6) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(300deg) translateZ(500px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
在url里面放你需要的相册，只需要在./img/后面写你自己相册的名字就可以了。
5.写好之后直接保存退出，双击你的index.html文件就可以看到效果了哦。
效果图如下：
在浏览器里是会旋转的哦，大家快试试哦，送给你心爱的那个她（他）吧，去送一份惊喜吧。
html和css真的很炫酷，对于没有接触过的人来说是有点困难，但是如果感兴趣的，深入了解一下就会发现它的奇妙之处，会制作很多炫酷的效果哦。