纯css实现翻牌特效
大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。
先给大家介绍一下翻牌的原理：
1、父容器设置设置perspective，让其子元素支持3d透视。
注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
2、牌正面和背面设置absolute属性，让正面的背面处于同一水平线上，用z-index属性设置背面朝上
3、让背面设置translateY(180)，沿y轴旋转180度，背面朝后，backface-visibility属性让背对屏幕的时候隐藏隐藏。
4、hover属性，当鼠标经过flip_wrap时，让flip沿y轴旋转180度，让正面绕y轴旋转180度到背面隐藏，背面沿y轴旋转180转到正面来。
原理就是这样，下面就开始看具体代码吧。
<div class="flip_wrap"><!-- 大容器 -->
<div class="flip"><!--实现翻牌容器 -->
<div class="side front"><!--牌正面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png">
</div>
<div class="side back"><!-- 牌背面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png">
</div>
</div>
</div>
.flip_wrap{
width:210px;
height:220px;
margin:0 auto;
perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
}
.flip{
width:210px;
height:220px;
backface-visibility:hidden;/*背对屏幕时隐藏*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
transition: all 1s ease; /*为翻牌添加过渡效果*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.side{
width:100%;
height:100%;
position: absolute;/*让背面和正面重叠*/
left:50%;
margin-left:-105px;
}
.front{
z-index:;/*让正面朝上*/
}
.back{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
.flip_wrap:hover .flip{
transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
<html>
<head>
<meta charset="UTF-8">
<title>翻牌</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.flip_wrap{
width:210px;
height:220px;
margin:0 auto;
perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
}
.flip{
width:210px;
height:220px;
backface-visibility:hidden;/*背对屏幕时隐藏*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
transition: all 1s ease; /*为翻牌添加过渡效果*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.side{
width:100%;
height:100%;
position: absolute;/*让背面和正面重叠*/
left:50%;
margin-left:-105px;
}
.front{
z-index:2;/*让正面朝上*/
}
.back{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
.flip_wrap:hover .flip{
transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip_wrap"><!-- 大容器 -->
<div class="flip"><!-- 实现翻牌容器 -->
<div class="side front"><!-- 牌正面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png">
</div>
<div class="side back"><!-- 牌背面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png">
</div>
</div>
</div>
</body>
</html>
案例展示：
http://211.140.7.173:8081/t/wuhairui/fanpai/index.html
纯css实现翻牌特效的更多相关文章
- CSS制作翻牌特效
应一个朋友要求替他把原本静态页面做成翻牌的特效. 主要应用了CSS3的transform,transiton.首先写好标签,一个ul下两个li元素,通过position的absolue设置两个li元素 ...
- 纯css实现下雪特效
//------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- 纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 菜鸟Scrum敏捷实践系列（一）用户故事概念
菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 敏捷开发 ...
- Mac系统安装nginx＋rtmp模块
1.安装命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) ...
- MFC画笔作用域的问题
今天发现了程序中的一个BUG.功能是在鼠标经过图形时,对图形进行加粗重绘.默认使用白色画刷.为防止白色背景下看不清,在白色背景下改用黑色画刷.代码如下 CPen* pOldPen;if (pDC-&g ...
- iOS开发之自定义弹出的键盘
self.inputField.inputView = myView 按文本框弹出的键盘不再是普通文字输入键盘,而是我们设置的myView.一般把这个方法写在viewDiLoad方法中. 也可以在键盘 ...
- java程序包不存在
当把classpath和path设置好之后. 自己写了个类的,然后放在test_package\mypackage路径下.主函数要用到.但是却出错了. 我一开始怀疑自己的classpath配置错了,在 ...
- impress.js初体验
概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...
- css3-逐帧动画
time,这里有两个时间,前面一个是规定完成这个动画所需要的时间,全称叫animation-duration,第二个time为动画延迟开始播放的时间,全称叫animation-delay,这两个数值可 ...
- 日期控件My97DatePicker的使用
一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...
- 创建keystone的catalog时提示：‘Internal Server Error (HTTP 500)’
在生成keystone的catalog时: [root@controller ~]# openstack service create --name keystone --description &q ...
- OC--Runtime知识点整理
1.Runtime简介 因为Objc是一门动态语言,所以它总是想办法把一些决定工作从编译连接推迟到运行时.也就是说只有编译器是不够的,还需要一个运行时系统 (runtime system) 来执行编译 ...