js实现鼠标点击图片，图片翻转

<div class="content">

<ul class="nice">
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_1.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_2.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_10.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_11.jpg"></a>
</li>
</ul>

<ul class="nice">
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_12.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_13.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_19.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_14.jpg"></a>
</li>
</ul>

<ul class="nice">
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_15.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_16.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_17.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src="images/veryhuo.com_pkp_18.jpg"></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src=""></a>
</li>
<li class="one">
<a class="front" href=""><img src="images/puke.jpg"></a>
<a class="contrary" href=""><img src=""></a>
</li>
</ul>

</div>

 

*页面内容*/
.content {
perspective:1000px;
width: 1300px;
margin:0 auto;
}
/*包含正反面div*/
.translate {
width: 300px;
height: 300px;
border-radius: 50%;
margin-left:10px;
margin-bottom:120px;
display: inline-block;/*div横排显示，变成行级元素*/
cursor: pointer;

}

/*正面*/
.translate .front{
width: 300px;
height: 300px;
border-radius: 50%;
display: inline-block;
background-color: #F6D1EA;
}
/*反面*/
.translate .back{
width: 300px;
height: 400px;
border-radius: 50%;
display: none;/*让背面先隐藏，不显示*/
}

/*正反面文字样式*/
.front p{
text-align: center;
font-size: 72px;
color:#fff;
line-height: 145px;
font-family: "微软雅黑";
}
.back p{
text-align: center;
font-size: 72px;
line-height: 145px;
color:#fff;
opacity: 0;/*使背面的字为透明，不显示*/
font-family: "微软雅黑";
}

//js

$(function(){
$(".translate").hover(function(){
$(this).css({"transform":"rotateY(180deg)","transition":"0.6s"});//沿着Y轴旋转180度,动画时间
//获取当前索引值，当前是哪个div
var n=$(this).index();
//将背面翻转过显示，将正面隐藏
$(".back").eq(n).css({"transform":"rotateY(180deg)","display":"inline-block"});
$(".front").eq(n).hide()
},function(){
$(this).css("transform","rotateY(0deg)");
//获取当前索引值，当前是哪个div
var n=$(this).index();
//将背面翻转过显示，将正面隐藏
$(".front").eq(n).css({"transform":"rotateY(360deg)","display":"inline-block"});
$(".back").eq(n).hide()
})
})