实现步骤
准备2张图片,一个在上一个在下
上方的图片不动,下方的图片先翻转180°,并隐藏
记录上方与下方图片的起始角度,上方起始角度为0,下方起始角度为180°
使用定时器累加角度,两张图片同时翻转...当上方的图片翻转到90度时,隐藏该图片,显示下方图片
当上方图片翻转到180度时,停止定时器,并还原记录的起始角度
第二次翻转,正反面角色互转即可
使用说明
// ...获取两张图片后调用该方法
turnCardAnimate...(up,down);
核心代码
/**
* 翻翻卡动画
* @param up 在上的图片
* @param down 在下的图片
*/
function turnCardAnimate(up,down...turnCardAnimate.isTurned){ // 已经旋转过,将两个对象互转
// 取反
var temp = up;
up = down;
down = temp;
}
var upDeg = 0; // 上面图片起始角度...var downDeg = 180; // 下面图片起始角度
down.style.display = 'none'; // 隐藏下面的图片
down.style.transform = 'perspective