纯CSS 撩妹3D旋转相册

1. 先看完成效果

          *原形态为几张图片为成两个正方形，大正方形包着小正方形然后自主的旋转

          *鼠标移入后外层（大正方形）变大继续旋转

2.基本布局

*一个box里包含两个box

3.基本CSS

        *CSS3 transform属性：属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、           缩放、移动或倾斜

        *CSS3 transform-style属性：使被转换的子元素保留其 3D 转换

        *CSS3 animation属性：使用简写属性，将动画与 div 元素绑定：

        *animation格式为：【规定需要绑定到选择器的 keyframe 名称    规定完成动画所花费的时                间，以秒或毫秒计   规定动画的速度曲线  规定在动画开始之前的延迟  规定动画应该播放的            次数  规定是否应该轮流反向播放动画】每个之间用空格隔开

4.搭建小正方形（内）

   *background：url  放入图片

   *-webkit-transform改变图片放入位置（X、Y、Z）轴

   *加入后会形成图二并且自转（animation属性设置）

5.搭建大正方形（外）

*先设置它的“div”属性

*opacity属性：设置 div 元素的不透明级别

*如图片再加入6张图片（注意应根据实际情况调整位置）完成如图3视图

6.条正大正方形（外）的位置使它们不交叉

7.使用hover伪类（不懂可看前面发表有讲解）改变大正方形使它“旷散”

以上便是所有3D旋转相册，祝各位撩妹成功加油！！！