时间:2016-01-22 07:24 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【纯css3实现图片翻牌特效】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
纯css3实现图片翻牌特效
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 翻牌</title>
</head>
<body>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none; margin:0; padding:0;}
.brandsShow{ width:1200px; height:620px; margin:0 auto; }
.brandsShow ul{ margin-left:-20px; width:1225px; height:auto; }
.brandsShow ul li{ float:left; display:inline; width:283px; height:283px; }
.flip-container {perspective: 1000;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:1px solid #fff;}
.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1}
.flip-container, .front, .back {width: 283px;height: 283px;}
.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}
.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}
.front img, .back img{ width:283px; height:283px; overflow:hidden;}
.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}
</style>
<ul>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="http://www.jb51.net/css/brandLi.html" class="flipper">
<div class="front "><img src="http://www.jb51.net/css/images/pic/brand10.jpg">前面</div>
<div class="back " ><img src="http://www.jb51.net/css/images/pic/brand01.jpg">后面</div>
</a>
</li>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="http://www.jb51.net/css/brandLi.html" class="flipper">
<div class="front "><img src="http://www.jb51.net/css/images/pic/brand10.jpg"></div>
<div class="back " ><img src="http://www.jb51.net/css/images/pic/brand01.jpg"></div>
</a>
</li>
</ul>
</body>
</html>
关于纯css3实现图片翻牌特效的相关讨论如下：
相关问题：CSS3上能够支持制作的的鼠标移动到图片上时候的图...
答：/***给你个最简单的:**/#image{transition: .4s all ease;-webkit-transition: .4s all ease;-moz-transition:.4s all ease;}#image:hover{transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);} >>详细
相关问题：js特效的问题，悬赏200.一个翻牌效果
答：你QQ多少 我发给你看下 >>详细
相关问题：适用于手机的css3图片特效有哪些？请指点。
答：http://www.zaole.net/# http://ecd.tencent.com/css3/tools.html 自己去挑吧 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-