照片墙
嗯嗯嗯，get一个小技能，用css实现照片墙。照片是倾斜的，互相遮挡的，当鼠标移动到照片上时，照片会变正，还会放大，显示在最上面。移走后又会恢复原样。
个人步骤：
先找到几张漂漂亮亮可可爱爱的图片，让他们排排站好，再用transition设置图片的角度，改变大小等（让它看起来是随意摆放的）。然后再使用hover,使鼠标移到上面的时候出现变化。hover中，用transform将图片的旋转角度变为0，它就摆正了。最后给它加上一点细节，给它一个阴影，给它一个transition变化时间，哦哦哦，还要给它加上z-index控制层次关系，使移动到图片上面时，图片会在最上层。等等等等等的细节，其他的我还没想到。
以下是代码和图片，因为不知道怎么把动画效果展示出来，就只有图片了，嗯，就这凑合着看吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>照片墙</title>
<style type="text/css">
.container{
margin:0 auto;
margin-top:100px;
1000px;
}
img{
150px;
height:150px;
box-shadow:2px 2px 2px;
border:solid 1px #CCCCCC;
transition:all 0.8s ease-in;
-moz-transition:all 0.8s ease-in;
-webkit-transition:all 0.8s ease-in;
z-index:1;
margin-right:-40px;
background:#fff;
}
.pic1{
transform:rotate(20deg) scale(0.8);
-webkit-transform:rotate(20deg) scale(0.8);
}
.pic2{
transform:rotate(10deg) scale(0.7);
}
.pic3{
transform:rotate(15deg) scale(0.75);
}
.pic4{
transform:rotate(-20deg) scale(0.7);
}
.pic5{
transform:rotate(10deg) scale(0.8);
}
.pic6{
transform:rotate(-12deg) scale(0.7);
}
.pic7{
transform:rotate(-16deg) scale(0.8);
}
img:hover{
cursor: pointer;
transform:rotate(0deg);
-moz-transform:rotate(0deg);