CSS3做一个3D展示相册

先来康康效果

（录不好，就只能是图片了）
原作者是油管上的Online Tutorials

现在就来实现它

1、准备知识
transform-style: preserve-3d;对3D变换有空间概念，其次就是perspective()；这个属性的理解了，想了解更多可以去MDN,相关博客文章，详细了解（主要我也理解不到位）

2、HTML结构
这里有个需要说下style="–i:1"，这个是css的原生变量，这了就声明了一个变量并赋值，在这里用变量，主要是方便后面样式的添加，当然变量还有高级的用法，就去查相关文档了（我也不会啊）。

3、CSS样式

1. 基本样式
   让整个容器盒子在页面居中显示，并给它一个合适的大小，这一定给上transform的变换方式是3d的，再准备一个动画。
2. 图片盒子
   利用定位、transform，让每张图片都打开，围成一个圆，这里就用到了变量，来简化一下代码，利用计算，每个div 的–i，都会子在calc（）中计算，不用我们在每个的用选择器再写一遍了。
   还有-webkit-box-reflect；这属性是盒子的投影，好像就谷歌支持，为了好看些，再底部加了投影，距离0px，再加了一个遮罩
   再就是让图片撑满父容器了。
   3. 文字处理及动画
   文字就用定位把它移动到图片圈的中间
   动画：让整个容器沿着Y轴旋转，注意了，这里的perspective(1200px)；要写在旋转前面，而且这条属性得就写在这里，单独写在容器身上，达不到效果，至于为什么，我也没搞清楚，后面搞清楚了再来修改。

好了这猫咪相册就写完了

总结
涉及的知识主要是transform相关的属性，对3D的空间感，重要属性的理解了（手动狗头），
CSS3真的很强大，有好多稀奇古怪的玩意儿，css也可以如此美丽。

————纵然是在巨人的肩膀上学习……