CSS3 animate flip下的图片翻转效果实例页面

最新推荐文章于 2025-01-05 09:00:00 发布

原创最新推荐文章于 2025-01-05 09:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

jquery 同时被 2 个专栏收录

17 篇文章

订阅专栏

css3

3 篇文章

订阅专栏

本文介绍如何使用CSS3动画技术实现图片的翻转效果，包括代码实现和关键CSS属性解释。

参考：http://www.zhangxinxu.com/study/201210/css3-animate-flip-example.html

图片我就不放了，图片宽高设置成和DIV宽高一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
	$(function(){
			var eleBack = null, eleFront = null,
    // 翻转图片 
    eleList = $(".list");

// 确定前面与后面元素
var funBackOrFront = function() {
    eleList.each(function() {
        if ($(this).hasClass("out")) {
            eleBack = $(this);
        } else {
            eleFront = $(this);
        }
    });
};
funBackOrFront();


$("#box").bind("click", function() {
    // 切换的顺序如下
    // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
    // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
    // 3. 完成翻面效果
    eleFront.addClass("out").removeClass("in");
    setTimeout(function() {
        eleBack.addClass("in").removeClass("out");
        // 重新确定正反元素
        funBackOrFront();
    }, 225);
    return false;
});
		
		
	})

</script>
<style>
img { border: 0; vertical-align: bottom; }
.box {
	width: 240px;
	height: 319px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-left:auto;
	margin-right: auto;
	position: relative;
	border-radius: 40px;
	
}
.list {
	position: absolute;
}
.list img {
	border-radius: 2px;
}

.viewport-flip {
	-webkit-perspective: 1000px;
	perspective: 1000px;
	position: absolute;
}
.flip {
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateX(0); 
	backface-visibility:hidden;
	transform:translateX(0);
}
.flip.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 175ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 175ms;
}
.flip.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 225ms;
	animation-name: flipintoright;
	animation-duration: 225ms;
}

@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}

</style>
</head>

<body>
<div id="box" class="box viewport-flip" title="点击翻面"> <a href="#" class="list flip out"><img src="front.jpg" alt="图片正面" /></a> <a href="#" class="list flip"><img src="back.jpg" alt="图片背面" /></a> </div>
</body>
</html>