3D旋转相册
*{
padding:0
margin:0
}
body,
html{
height:100%
}
/*背景图片在这里设置*/
body{
background-image:url("images/beijing.jpg")
background-size:100%100%
}
#box{
width:280px
height:400px
position:fixed
left:0
right:0
top:0
bottom:0
margin:auto
transform-style:preserve-3d
transform:rotateX(0deg)rotateY(0deg)
animation:go45slinearinfinite
}
#boximg{
width:280px
height:400px
position:absolute
left:0
top:0
}
#boximg:nth-child(1){
transform:rotateY(0deg)translateZ(650px)
}
#boximg:nth-child(2){
transform:rotateY(36deg)translateZ(650px)
}
#boximg:nth-child(3){
transform:rotateY(72deg)translateZ(650px)
}
#boximg:nth-child(4){
transform:rotateY(108deg)translateZ(650px)
}
#boximg:nth-child(5){
transform:rotateY(144deg)translateZ(650px)
}
#boximg:nth-child(6){
transform:rotateY(180deg)translateZ(650px)
}
#boximg:nth-child(7){
transform:rotateY(216deg)translateZ(650px)
}
#boximg:nth-child(8){
transform:rotateY(252deg)translateZ(650px)
}
#boximg:nth-child(9){
transform:rotateY(288deg)translateZ(650px)
}
#boximg:nth-child(10){
transform:rotateY(324deg)translateZ(650px)
}
@keyframesgo{
0%{
transform:rotateX(0deg)rotateY(0deg)
}
25%{
transform:rotateX(20deg)rotateY(180deg)
}
50%{
transform:rotateX(0deg)rotateY(360deg)
}
75%{
transform:rotateX(-20deg)rotateY(540deg)
}
100%{
transform:rotateX(0deg)rotateY(720deg)
}
}
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg
images/7.jpg
images/8.jpg
images/9.jpg
images/10.jpg
1. 在相册模块点击“编辑”链接
2. 查看浏览器的URL http:// gb2312.spaces.msn.com/ PersonalSpace.aspx ?_11 _photoalbum _spaHandler= TWljcm9z b2Z0LlNw YWNlcy5XZW IuUGFydH MuUGhvdG 9Bb GJ1bS5FZ Gl0TW9kZ UN vbnRyb2x sZXI%24 &_c11_photoalbum _albumid= cns!3CDBA96A871601F6!493 &_c11_photoalbum _spaReturnToFull=0 &_c= photoalbum &_c02_owner=1 找到cns id, 就是橙色的部分
3. 打开新的浏览器窗口 输入
http://spaces.live.com/photomailviewer.aspx?path=cns!3CDBA96A871601F6!493
4. 哈哈 你看到了什么 一个轻量级的相册浏览器! 这下我们的Spaces可以解放拉 在自定义的模块里面把相册隐藏起来 直接作一个相册URL的列表 朋友直接点击就可以去Photo Mail Viewer页面去看啦
