<html>
<head>
<title>3D翻牌效果 </title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<style type="text/css">
.outer{
width: 235px;
height: 280px;
border: 1px red solid;
margin: 0 auto;
}
.outer a{
width:235px;
height:2800px;
position: absolute;
/*transform-style: preserve-3d;*/
backface-visibility:hidden;
-webkit-backface-visibility: hidden;
transition:all 2s;
display: block;
}
.div1{
background: url("1.png") no-repeat;
transform:rotateY(-180deg);
}
.div2{
background: url("2.png") no-repeat;
transform:rotateY(-180deg);
}
.div1.active{
transform:rotateY(0deg);
}
.div2.active{
transform:rotateY(0deg);
}
/* .outer:hover .div1{
transform:rotateY(-180deg);
}
.outer:hover .div2{
transform:rotateY(0deg);
}*/
</style>
</head>
<body>
<div class="outer">
<a class="div1 active" href="www.qq.com"></a>
<a class="div2" href="www.baidu.com" ></a>
</div>
</body>
<script type="text/javascript">
$('.outer').hover(function(){
$('.div1').removeClass('active');
$('.div2').addClass('active');
},function(){
$('.div2').removeClass('active');
$('.div1').addClass('active');
});
</script>
</html>
css效果和query效果都可以正常使用
但是要注意的是，在使用jquery方式的时候，不要把hover 的事件加在旋转的物体上，否则会一直触发 hover 的进入和跳出事件。
网友评论