作者：zccst
使用的样式：
1，正常情况下
ul#index_cards li {
background: url("../images/card_bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #666666;
display: block;
float: left;
height: 450px;
margin-bottom: 70px;
padding: 25px 10px;
position: relative;
transition: all 0.5s ease-in-out 0s;//放在这里可以鼠标进出都有效果
width: 130px;
}
#card-1 {
left: 150px;
top: 40px;
transform: rotate(-20deg);
z-index: 1;
}
#card-2 {
left: 70px;
top: 10px;
transform: rotate(-10deg);
z-index: 2;
}
#card-3 {
background-color: #69732B;
z-index: 3;
}
#card-4 {
right: 70px;
top: 10px;
transform: rotate(10deg);
z-index: 2;
}
#card-5 {
right: 150px;
top: 40px;
transform: rotate(20deg);
z-index: 1;
}
ul#index_cards li:hover {
z-index: 4;
}
2，hover时
#card-1:hover {
transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
transform: scale(1.1) rotate(22deg);
}