使用css3过渡属性实现翻牌效果

一、css3过渡属性transition理解：

transition指的是页面元素某种属性从状态A过渡变化（非立即跳跃）到状态B，以及这种过渡所需要的时间（包括设定过渡延迟时间等等）。

二、如何实现翻牌效果？

背面与正面如下图：

第一步：通过css绝对定位将两者重叠，第二张正面图片沿y轴旋转180度，第一张背面图片的backface-visibility设置为none，即背面不可见。

html代码段

 <div class="card">
        <img src="背面图片" class="backface"/>
        <div class="frontface">
        <img src="正面图片"/>
        </div>
</div>

css代码段

.card{position:relative;height:150px;width:150px;border:1px solid #ccc;}
.backface{position:absolute; display:block; left:0; top:0; z-index:2; backface-visibility:none;} 为节省篇幅，此处请另行加入backface-visibility属性浏览器兼容前缀。
.frontface{position:absolute:left:0;top:0;transform:rotateY(180deg);z-index:1;} 此处请另行加入transform属性浏览器兼容前缀。

第二步：在css样式中，定义flip,mousein，mouseout三个class，通过js确定鼠标悬停.card元素时(使用jQuery)，对两个img子元素同时进行y轴旋转过渡。过渡时间：鼠标进入0.5s，鼠标移出0.3s。

css代码段

.flip{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
.mouseout{-moz-transition:all 0.3s !important; -webkit-transition:all 0.3s !important; -o-transition:all 0.3s !important; transition: all 0.3s !important;}
.mousein{-moz-transition:all 0.5s !important; -webkit-transition:all 0.5s !important; -o-transition: all 0.5s !important; transition: all 0.5s !important;}

js代码段(先嵌入jquery库)

$(document).ready(function(){

$('.card').hover(function(){

$(this).find('img').removeClass('mouseout').addClass('mousein').addClass('flip');

},function(){

$(this).find('img').removeClass('mousein').addClass('mouseout').addClass('flip');

});

});

点击效果图查看效果：

代码打包下载