css3图片旋转

CSS3实现的一个简单的图片旋转以及移动特效，使用的是transform属性。浏览示例请在IE9及以上或者其他支持CSS3transform的浏览器上浏览。

#contentMain{

    margin-bottom:50px;

}

.Item {

    width: 150px;

    height: 150px;

    margin-top: 100px;

    margin-left: 300px;

    position: absolute;

}

.Item2 {

    margin-left: 500px;

    position: absolute;

}

.Item>img {

    width: 150px;

    height: 150px;

    position: absolute;

    border: 3px solid #fff;

    -webkit-box-shadow: 1px 0px 15px #ccc;

    -moz-box-shadow: 1px 0px 15px #ccc;

    box-shadow: 1px 0px 15px #ccc;

    transition-duration: .5s;

}

.Item>img:nth-child(1) {

    -webkit-transform: rotate(10deg);

    -moz-transform: rotate(10deg);

    transform: rotate(10deg);

}

.Item>img:nth-child(2) {

    -webkit-transform: rotate(-10deg);

    -moz-transform: rotate(-10deg);

    transform: rotate(-10deg);

}

.Item:hover img:nth-child(2) {

    margin-left: -150px;

    -webkit-transform: rotate(-370deg);

    -moz-transform: rotate(350deg);

    transform: rotate(350deg);

}

.Item:hover img:nth-child(1) {

    -webkit-transform: rotate(370deg);

    -moz-transform: rotate(370deg);

    transform: rotate(370deg);

    margin-left: 150px;

}