transform和transition

作者：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);

}