console
<div class="rotateHolder">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?0117"
class="rotate1" />
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0117"
class="rotate2" />
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?0117"
class="rotate3" />
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?0117"
class="rotate4" />
</div>
<div class="scaleHolder">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?0117"
class="scale1" />
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0117"
class="scale2" />
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?0117"
class="scale3" />
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?0117"
class="scale4" />
</div>
<div class="fadeHolder">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?0117"
class="fade1" />
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0117"
class="fade2" />
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?0117"
class="fade3" />
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?0117"
class="fade4" />
</div>
<div class="upHolder">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?0117"
class="up1" />
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0117"
class="up2" />
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?0117"
class="up3" />
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?0117"
class="up4" />
</div>
<div class="rotateyHolder">
<div class="rotateyContainer">
<span class="rotateyout">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?0117"/>
</span>
<span class="rotateyin">
<img src="http://img.baidu.com/img/image/liulanimage/w_meinv.jpg?01241"/>
</span>
</div>
<div class="rotateyContainer">
<span class="rotateyout">
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0117"/>
</span>
<span class="rotateyin">
<img src="http://img.baidu.com/img/image/liulanimage/w_yulemingxing.jpg?0124"/>
</span>
</div>
<div class="rotateyContainer">
<span class="rotateyout">
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?0117"/>
</span>
<span class="rotateyin">
<img src="http://img.baidu.com/img/image/liulanimage/w_dongmanyouxi.jpg?01234"/>
</span>
</div>
<div class="rotateyContainer">
<span class="rotateyout">
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?0117"/>
</span>
<span class="rotateyin">
<img src="http://img.baidu.com/img/image/liulanimage/w_mengchong.jpg?01234"/>
</span>
</div>
</div>
.rotateHolder, .scaleHolder, .fadeHolder, .upHolder,.rotateyHolder {
border: 10px solid #ffffff;
height: 115px;
width:640px;
padding: 20px 20px 0 20px;
float: left;
-webkit-box-shadow:2px 2px 5px #333333;
-moz-box-shadow:2px 2px 5px #333333;
box-shadow: 2px 2px 5px #333333;
overflow: hidden;
background:#aaa;
margin-bottom:10px;
}
.rotateHolder img, .scaleHolder img, .fadeHolder img, .upHolder img {
position:relative;
float : left;
width:150px;
max-widht:150px;
border: 5px solid #ffffff;
-webkit-transition:-webkit-transform 0.3s ease-in;
-moz-transition:-moz-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
transition:transform 0.3s ease-in;
}
.rotateHolder img:hover {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-transform: rotate(0deg);
z-index:100;
}
.rotate1 {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-transform: rotate(-5deg);
}
.rotate2 {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-transform: rotate(15deg);
}
.rotate3 {
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform :rotate(-15deg);
-transform: rotate(-15deg);
}
.rotate4 {
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-transform: rotate(10deg);
}
.scaleHolder img:hover {
transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-transform: scale(1.05, 1.05);
-webkit-box-shadow:2px 2px 5px #333333;
-moz-box-shadow:2px 2px 5px #333333;
box-shadow: 2px 2px 5px #333333;
z-index:100;
}
.fadeHolder img {
opacity:0.5;
}
.fadeHolder img:hover {
opacity:1;
border: 5px solid #000000;
}
.upHolder img:hover {
transform: translate(0px, -10px);
-webkit-transform: translate(0px, -10px);
-moz-transform: translate(0px, -10px);
-o-transform: translate(0px, -10px);
-transform: translate(0px, -10px);
}
.rotateyHolder .rotateyContainer {
position:relative;
float:left;
width:150px;
height:94px;
border: 5px solid #ffffff;
}
.rotateyHolder img {
position:relative;
width:150px;
}
.rotateyHolder .rotateyout {
z-index:100;
}
.rotateyHolder .rotateyin {
z-index:99;
}
.rotateyHolder .rotateyout,.rotateyHolder .rotateyin {
display:block;
position:absolute;
left:0;
top:0;
width:150px;
-webkit-transition:-webkit-transform 0.3s ease-in-out;
-moz-transition:-moz-transform 0.3s ease-in-out;
-o-transition:-o-transform 0.3s ease-in-out;
transition:transform 0.3s ease-in-out;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.rotateyHolder .rotateyout:hover {
z-index:100;
transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
-moz-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-transform: rotatey(180deg);
}
.rotateyHolder .rotateyin:hover {
z-index:101;
transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
-transform: rotatey(-180deg);
}