HTML5+css3：3D旋转木马效果相册实现
1 、
perspective
perspective 属性包括两个属性： none 和具有单位的长度值。
其中 perspective 属性的默认值为 none ，表示无限的角度来看 3D 物体，但看上去是平的。另一个值
大于 0 的值。而且其单位不能为百分比值。
变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型 3D 变化。简单一点说：当 perspective 设置
length 时，如果越小则表示 3D 效果越明显，你的眼睛就越靠近 3D 物体，反之则反之。
2 、
transform: translateZ(length)
假设设置了 perspective ： 300px 时，设置 translateZ 的值越小则子元素大小越小，当设置值接近 300px 时，则仿佛此元素在面
前，当超过 300px 以后，则以前到达你视野的后面，该元素就不可见了。
上
例
的
核
心
：
上
1 、首先所有的图片的容器 position:absolute ，叠加在一起，然后一次设置 rotateY 分别为 40*i ，
i= 0 , 1, 2…9 ；所有图片会相
交成一个类似花的形状
2 、然后为每个图片的容器设置 translateZ ，所有图片会从对应的角度向外移动，扩展成一个大圆，即上图效果。
html:
Do one thing at a time, and do well..
Do one thing at a time, and do well..
Keep on going never give up.
Whatever is worth doing is worth doing well.
Believe in yourself.
Action speak louder than words.
Never put off what you can do today until tomorrow.
Jack of all trades and master of none.
Judge not from appearances.
CSS ：
li
{
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
position: absolute;
bottom: 0;
}
li img
{
width: 128px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
vertical-align: middle;
}
li span
{
display: block;
width: 128px;
text-align: center;
color: #333;
font-size: 8px;
}
#stage
{
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
-webkit-perspective: 1200px;
position: relative;
}
#container
{
background: url("img/xawl.jpg") no-repeat 0 0;
margin-top: 200px;
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
position: absolute;
left: 50%;
}
li:nth-child(0)
{
-webkit-transform: rotateY(0deg) translateZ(300px);
}
li:nth-child(1)
{
-webkit-transform: rotateY(40deg) translateZ(300px);
}
li:nth-child(2)
{
-webkit-transform: rotateY(80deg) translateZ(300px);
}
li:nth-child(3)
{
-webkit-transform: rotateY(120deg) translateZ(300px);
}
li:nth-child(4)
{
-webkit-transform: rotateY(160deg) translateZ(300px);
}
li:nth-child(5)
{
-webkit-transform: rotateY(200deg) translateZ(300px);
} li:nth-child(6)
{
-webkit-transform: rotateY(240deg) translateZ(300px);
}
li:nth-child(7)
{
-webkit-transform: rotateY(280deg) translateZ(300px);
}
li:nth-child(8)
{
-webkit-transform: rotateY(320deg) translateZ(300px);
}
li:nth-child(9)
{
-webkit-transform: rotateY(360deg) translateZ(300px);
}
div#stage 作为舞台，设置 perspective ，每个 li 分别设置 rotateY ，以及 translateZ ；然后我们会 div#container 设置了 -webkit-
transform-style: preserve-3d;transform-style: flat | preserve-3d 其中 flat 值为默认值，表示所有子元素在 2D 平面呈现。
preserve-3d 表示所有子元素在 3D 空间中呈现。如果对一个元素设置了 transform-style 的值为 preserve-3d ，它表示不执行平展
操作，他的所有子元素位于 3D 空间中。一般情况下，此属性用于 3D 动画效果的执行元素，即就是它要应用 3D 动画效果，所以
它的子元素都应该在 3D 空间。
有一点要注意：本例子，其实正在的动画效果
，在于鼠标点击， div#Container 在不端的改变 rotateY ，所有的图片元素均在
div#container 中，且已经展现为旋转木马效果
，现在要做的就是旋转这个木马，所以只需要每次改变 div#container 的 rotateY
40 角度即可。