html写3D旋转相册的原理,【源码+教程】3D旋转相册（css3+js/纯css）

今天在抖音刷到了一个旋转相册，挺好玩的，就试着写了一下，我只是一个菜鸟，勿喷。另外，演示站请PC端食用，移动端不能拖拽(很卡)

工具：DW/Editplus等等都行、一部电脑/云电脑、有电、一堆图片

由于这是写着玩的，我就没按套路搞了(不喜欢看的，源码在最下面)

OK！步入正题，这里只讲代码，不讲萌新教程(重点都标出来了)

新建站点：名字自取，创建img文件夹存放图片，新建HTML文件

第一步：配置好景深(设置div盒子体现出景深)

首先设置一个盒子，由于是要体现景深的盒子，我就取名为perspective

然后我们需要一个用来放图片的盒子,并插入图片，我就取名为wrap了

`

第一步布局总代码为：

`

第二部，页面布局

首先清除默认边距：

*{margin:0;padding:0;}/*清除浏览器默认样式*/

接着把body的滚动条去掉，然后再加一个背景色：body{

background:#66677c;

overflow:hidden;

}

做完这些，效果是这样的：