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 ...
随机推荐
- JZYZOJ1998 [bzoj3223] 文艺平衡树 splay 平衡树
http://172.20.6.3/Problem_Show.asp?id=1998 平衡树区间翻转的板子,重新写一遍,给自己码一个板子. #include<iostream> #incl ...
- 【20181027T1】洛阳怀【推结论+线性筛+分解质因数+GCD性质】
原题:CF402D [错解] 唔,先打个表看看 咦,没有坏质数好像就是质因数个数啊 那有坏质数呢? 好像变负数了 推出错误结论:f(x)=x的质因数个数,如果有个坏质数,就乘上-1 然后乱搞,起码花了 ...
- bzoj 4439: [Swerc2015]Landscaping -- 最小割
4439: [Swerc2015]Landscaping Time Limit: 2 Sec Memory Limit: 512 MB Description FJ有一块N*M的矩形田地,有两种地形 ...
- CROC 2016 - Qualification C. Hostname Aliases map
C. Hostname Aliases 题目连接: http://www.codeforces.com/contest/644/problem/C Description There are some ...
- 2038: [2009国家集训队]小Z的袜子(hose) （莫队算法）
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=2038 专题练习: http://acm.hust.edu.cn/vjudge/conte ...
- Spring AOP通知实例 – Advice
Spring AOP(面向方面编程)框架,用于在模块化方面的横切关注点.简单得说,它只是一个拦截器拦截一些过程,例如,当一个方法执行,Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后 ...
- XmlnsDefinitionAttribute Is Pretty Nifty
When we want to declaratively use our custom controls or reference the types we defined in XAML, we ...
- PHP：相对于C#，PHP中的个性化语法
背景 今天把PHP的基本语法结构熟悉了一下,包括:变量.类型.常量.运算符.字符串.作用域和函数等,本文列举一些我需要强化记忆的结构(和C#不同). 一些个性化的结构 foreach结构 <?p ...
- macOS VMWare Fusion报错”找不到可以连接的有效对等进程”的解决方案
macOS VMWare Fusion报错”找不到可以连接的有效对等进程”的解决方案 我的是macOS 10,默认情况下不允许未知身份的软件安装 默认情况,如下图所示: 解决办法: sudo spct ...
- LTE试题
D 如果出现eNB的告警1018007“小区退服,光口不可用”,不可能是以下哪种原因造成的?( ) 基带板上Ir接口光模块损坏 基带板上Ir接口光模块被拔出 基带板上Ir接口光模块型 ...