纯css3实现图片翻牌特效


Posted in HTML / CSS onMarch 10, 2015

大家先看下效果演示:

纯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; /*父类容器中 perspective 子类允许透视*/
-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; /*使其子类变换后得以保留 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="brandLi.html" class="flipper">
<div class="front "><img src="images/pic/brand10.jpg">前面</div>
<div class="back " ><img src="images/pic/brand01.jpg">后面</div>
</a>
</li>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="brandLi.html" class="flipper">
<div class="front "><img src="images/pic/brand10.jpg"></div>
<div class="back " ><img src="images/pic/brand01.jpg"></div>
</a>
</li>
</ul>
</body>
</html>

以上就是本文所述的全部内容了,希望大家能够喜欢。

HTML / CSS 相关文章推荐
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 #HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 #HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 #HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 #HTML / CSS
You might like
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Python contextlib模块使用示例
2015/02/18 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Django自定义用户认证示例详解
2018/03/14 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python版中国省市经纬度
2020/02/11 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
写好自荐信的技巧
2013/11/08 职场文书
计算机个人求职信范例
2014/01/24 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python