flip 翻转效果 css3实现
1.实现代码
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>flip 翻转效果css3实现</title>
<style type="text/css">
.container {
perspective: 1000;
transform-style: preserve-3d;
} .container,
.front,
.back {
width: 80px;
height: 80px;
} .flip {
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
} .front,
.back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
} .front {
z-index: 2;
} .back {
transform: rotateY(-180deg)
} .container:hover .flip {
transform: rotateY(180deg);
}
</style>
</head> <body>
<div class="container">
<div class="flip">
<div class="front">
<img src="img/area.png" />
</div>
<div class="back">
<img src="img/go.png" />
</div>
</div>
</div>
</body> </html>
2、效果
3、说明
实现技术主要为：transition和transform。
其中rotateY的参数为正值时旋转方向为“离开屏幕朝向人的方向”
flip 翻转效果 css3实现的更多相关文章
- 图片触及翻转效果 css3
实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果: html: <!DOCTYPE HTML> <html> <head> <meta ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- css3 利用perspective实现翻页效果和正方体 以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- CSS3+HTML5特效2 - 翻转效果
先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
随机推荐
- WC2018伪题解
NOIP分数过低的场外选手,一个月之后才有幸膜到这套卷子.感觉题目质量很不错啊,可惜了T1乱搞可过,T2题目出锅非集训队员没有通知到,导致风评大幅被害. 感觉Cu的话随手写两个暴力就稳了,Ag的话T3 ...
- [NC13B]贝伦卡斯泰露/[51Nod1400]序列分解
[NC13B]贝伦卡斯泰露/[51Nod1400]序列分解 题目大意: 给定\(A_{1\sim n}(n\le40)\),问是否能将\(A\)分解成两个相同的子序列? 思路: 折半搜索.时间复杂度\ ...
- python爬虫我是斗图之王
python爬虫我是斗图之王 本文会以斗图啦网站为例,爬取所有表情包. 阅读之前需要对线程池.连接池.正则表达式稍作了解. 分析网站 页面url分析 打开斗图啦网站,简单翻阅之后发现最新表情每页包含的 ...
- bzoj 1211: [HNOI2004]树的计数 -- purfer序列
1211: [HNOI2004]树的计数 Time Limit: 10 Sec Memory Limit: 162 MB Description 一个有n个结点的树,设它的结点分别为v1, v2, ...
- ASP.Net如何用Cookies保存对象
在ASP.Net中,有时候考虑到较多的使用Session来保存对象,会增加服务器的负载,所以我们会选择用Cookies来保存对象的状态,而Cookies只能保存字符串,这时,我们可以考虑用序列化操作来 ...
- input输入框限制输入英文，数字，汉字
<h1>js验证输入框内容</h1><br /><br /> 只能输入英文<input type="text" onkeyup ...
- FreeRTOS API
Task Creation xTaskCreate vTaskDelete Task Control vTaskDelay vTaskDelayUntil uxTaskPriorityGet vTas ...
- php 方法笔记 比file_get_contents好
/*比file_get_contents稳定的多!$timeout为超时时间,单位是秒,默认为1s.*/ private function curl_get_contents($url,$timeou ...
- iOS：分组的表格视图UITableView,可以折叠和展开
虽然表格视图可以分组,但是如果分组后,每一行的内容太多,往后翻看起来比较的麻烦.为了解决这个麻烦,可以将分组的行折叠和展开.折叠时,行内容就会隐藏起来:展开时,行内容就会显示出来. 折叠时: 展开后: ...
- SpringSecurity实现后台管理员登录（二）
需求:login.ftl页面中登录成功后进入index.ftl页面中 一.pom.xml中添加json转换相关的包 <dependency> <groupId>com.fast ...