css背景图（css3D旋转相册）

昨天学习了平面动画，今天来3D动画：

css3的强大之处就在于它可以用很少量的标签，来实现一些要用到插件或者js，jq很多代码才能实现的复杂功能。随着css3版本的推进，各浏览器的兼容性也会越来越好，开发会很容易。

实现上图的关键点在于，如何布局不了解css3的可能会说要定位，其实不然，我们只需要transform的rotate和translate即可轻松实现旋转位移.至于图片了可以用img也可以直接背景图。下面是我的页面结构和css样式

<style>

*{margin:0; padding:0; list-style: none;}

div{

width: 105px;

height: 150px;

margin:100px auto;

-webkit-perspective: 1000;

-webkit-perspective-origin: center center;

}

ul{

width: 105px;

height: 150px;

position: relative;

-webkit-transform-style: preserve-3d;

-webkit-transform:rotateX(-16deg) rotateY(0deg) rotateZ(0deg);

-webkit-animation: ;

}

@-webkit-keyframes run{

from{ }

to{ }

}

ul li{width: 105px; height: 150px; position: absolute; -webkit-background-size:100% 100%;}

ul li:nth-child(1){

background-image: url(images/01.jpg);

-webkit-transform: translateZ(200px);

}

ul li:nth-child(2){

background-image: url(images/02.jpg);

-webkit-transform:rotateY(30deg) translateZ(200px);

}

ul li:nth-child(3){

background-image: url(images/03.jpg);

-webkit-transform:rotateY(60deg) translateZ(200px);

}

ul li:nth-child(4){

background-image: url(images/04.jpg);

-webkit-transform:rotateY(90deg) translateZ(200px);

}

ul li:nth-child(5){

background-image: url(images/05.jpg);

-webkit-transform:rotateY(120deg) translateZ(200px);

}

ul li:nth-child(6){

background-image: url(images/06.jpg);

-webkit-transform:rotateY(150deg) translateZ(200px);

}

ul li:nth-child(7){

background-image: url(images/07.jpg);

-webkit-transform:rotateY(180deg) translateZ(200px);

}

ul li:nth-child(8){

background-image: url(images/08.jpg);

-webkit-transform:rotateY(210deg) translateZ(200px);

}

ul li:nth-child(9){

background-image: url(images/09.jpg);

-webkit-transform:rotateY(240deg) translateZ(200px);

}

ul li:nth-child(10){

background-image: url(images/10.jpg);

-webkit-transform:rotateY(270deg) translateZ(200px);

}

ul li:nth-child(11){

background-image: url(images/11.jpg);

-webkit-transform:rotateY(300deg) translateZ(200px);

}

ul li:nth-child(12){

background-image: url(images/12.jpg);

-webkit-transform:rotateY(330deg) translateZ(200px);

}

</style>

结构是div抱着ul和li有多少图片就有多少个li（这里就不展示了）

只有这个相册就可以旋转了么，当然不会，各位还需要在上文@-webkit-keyframes处补全animation动画即可，animation动画在上篇《纯css实现无缝滚动》中又详细代码 拿过来即可