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 ...
随机推荐
- 2015 UESTC 数据结构专题C题 秋实大哥与快餐店 字典树
C - 秋实大哥与快餐店 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/59 ...
- Codeforces Round #302 (Div. 2) B. Sea and Islands 构造
B. Sea and Islands Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/544/p ...
- 判断终端是ios还是安卓的一些妙用（附加微信分享图标修改）
最近遇到一个项目 要求有两个icon(就是下载地址 下载安卓的apk 和ios的安装包) 一开始的方案是 什么设备都显示这两个icon 但是后来老大说这样不好 安卓用户给他下载ios 也不行 ...
- 结构体序列为JSON
结构体序列为JSON 本例运行效果图: uses SynCommons; const /// JSON字符串 JSON1 = '{' + #13#10 + '"glossary": ...
- 一步一步实现listview加载的性能优化
listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...
- Appium+python自动化11-adb必知必会的几个指令
前言 学android测试,adb是必学的,有几个常用的指令需要熟练掌握 一.检查设备 1.如何检查手机(或模拟器)是连上电脑的,在cmd输入: >adb devices
- 关于comparator接口和comparable接口以及它们各自的方法compare()和compareTo()
在今天做的LeetCode的题中有两道都出现了利用接口实现对象的排序.两题的相关链接: 1.利用comparable接口对对象排序 2.利用comparator接口实现排序 因为之前都没接触过这两个接 ...
- jetty7.6运行struts2项目问题解决
运行struts2项目报错:报错1:11:56:51,400 WARN Dispatcher:68 - Could not find action or result: /credit_public ...
- [Android Studio] Android Studio使用教程（一）
转载:http://blog.csdn.net/hyr83960944/article/details/37509113 今年的Google全球开发者 大会虽然没有新的Android系统和设备,但是还 ...
- JAVA泛型通配符T，E，K，V区别，T以及Class<T>，Class<?>的区别以及接口里default方法
使用大写字母A,B,C,D......X,Y,Z定义的,就都是泛型,把T换成A也一样,这里T只是名字上的意义而已 ? 表示不确定的java类型 T (type) 表示具体的一个java类型 K V ( ...