纯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实现跳动的动画效果
Sep 12 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php服务器的系统详解
2019/10/12 PHP
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
python中__call__内置函数用法实例
2015/06/04 Python
利用python发送和接收邮件
2016/09/27 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python生成随机红包的实例写法
2019/09/02 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python 批量将中文名转换为拼音
2021/02/07 Python
计算机专业毕业生自荐书
2014/06/02 职场文书
社区反邪教工作方案
2014/06/16 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
服务行业标语口号
2015/12/26 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
vue中data里面的数据相互使用方式
2022/06/05 Vue.js