3d正方体旋转相册
参考链接：http://www.softwhy.com/article-9051-1.html
起因
事情的起因是这个样子的，作为中华好闺蜜，没理由让自己的小宝贝羡慕别人！！
效果图
先看效果图，比较有动力~
思路
1.先死皮赖脸要六张图片，构成正方体结构。
2.写html搭建立方体模型。
3.加入动画。
涉及到的知识点
CSS3 transform变换，CSS3 animation 动画
transform
此属性是CSS3新增，transform翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果。
transform:translate3d(x,y,z)
参数解析：
（1）.x：表示在x轴方向的位移。
（2）.y：表示在y轴方向的位移。
（3）.z：表示在z轴方向的位移。
rotate3d(x,y,z,angle)
参数解析:
（1）.x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
（2）.y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
（3）.z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
（4）.angle：一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。
animation
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
参数解析：
（1）.animation-name：规定动画的名称，利用它可以与@keyframes关联起来。
（2）.animation-duration：规定动画的时长，时间是秒，比如5s。
（3）.animation-timing-function：规定动画的过渡类型，可以使用内置固定的关键字，也可以自定义数据。
（4）.animation-delay：规定动画开始前的延迟时间。
（5）.animation-iteration-count：规定动画的重复次数。
（6）.animation-direction：规定动画循环中是否会反向运动。
（7）.animation-fill-mode：规定对象动画时间之外的状态。
（8）.animation-play-state：规定动画是否正在运行或暂停。
蚂蚁部落（文章顶部参考链接），讲得很详细，这里只简单给出参数说明，如果还有困扰，这是直通车。
具体实现过程：
第一步
完成基本的HTML结构
<html>
<head>
<meta charset="utf-8">
<title>小小鸿title>
<style>
style>
head>
<body>
<div>
<ul>
<li>
<img src="images/1.jpg">
li>
<li>
<img src="images/2.jpg">
li>
<li>
<img src="images/3.jpg">
li>
<li>
<img src="images/4.jpg">
li>
<li>
<img src="images/5.jpg">
li>
<li>
<img src="images/6.jpg">
li>
ul>
div>
body>
<html>
第二步
利用transform变换，营造立体感。
思路是这样的，给li标签加入定位让它们重叠在一起，然后通过位移旋转，构成一个立方体，最后再给父元素加点角度让它更具有立体感。
完成之后现在是下面的效果
第三步
加入动画
1.首先定义一个动画帧：
名字是spin,从transform: translateZ(-10em) rotateX(0) rotateY(0deg);到 transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);，即绕x轴y轴都旋转360度。
@keyframes spin
{
from
{
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to
{
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
2.将动画加入
时间是16s,线性动画，无限循环
最后贴上完整代码
<html>
<head>
<meta charset="utf-8">
<title>小小鸿title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 200px auto;
position: relative;
-webkit-perspective: 1500px; /* 景深，有了它子元素才能产生3D效果 ,加上内核可以实现不同浏览器不同样式*/
}
ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
/* 规定指定元素的子元素的变换效果是位于3D空间，还是被平展于元素的2D空间 */
transform: rotateX(-30deg) rotateY(30deg);
/* 整体给一点角度比较容易看出立体感 */
animation: 16s spin linear infinite;
}
li {
width: 400px;
height: 400px;
list-style-type: none;
/* 绝对定位,先让li标签重叠 */
position: absolute;
}
ul li img {
/* 图片和父盒子一样大 */
width: 100%;
height: 100%
}
/* 调整图片位置组成正方体，此时正方体正对着我们，给ul整体旋转一定角度，更容易看出立体感 */
ul :nth-child(1){
transform:rotateY(0deg) translateZ(200px);
}
ul :nth-child(2){
transform: rotateY(-90deg) translateZ(200px);
}
ul :nth-child(3) {
transform: rotateY(-180deg) translateZ(200px);
}
ul :nth-child(4){
transform: rotateY(-270deg) translateZ(200px);
}
ul :nth-child(5){
transform: rotatex(90deg) translateZ(200px);
}
ul :nth-child(6){
transform: rotatex(90deg) translateZ(-200px);
}
@keyframes spin
{
from
{
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to
{
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
style>
head>
<body>
<div class="box">
<ul>
<li>
<img src="images/1.jpg">
li>
<li>
<img src="images/2.jpg">
li>
<li>
<img src="images/3.jpg">
li>
<li>
<img src="images/4.jpg">
li>
<li>
<img src="images/5.jpg">
li>
<li>
<img src="images/6.jpg">
li>
ul>
div>
body>
<html>