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实现的更多相关文章

  1. 图片触及翻转效果 css3

    实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果: html: <!DOCTYPE HTML> <html> <head> <meta ...

  2. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  3. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  4. CSS3的翻转效果

    css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  7. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  8. CSS3+HTML5特效2 - 翻转效果

    先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...

  9. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

随机推荐

  1. Eclipse下mallet使用的方法

    Mallet是Umass大牛开发的一个关于统计自然语言处理的l的开源库,很好的一个东西.可以用来学topic model,训练ME模型等.对于开发者来说,其官网的技术文档是非常有效的. mallet下 ...

  2. Java乐观锁实现之CAS操作

    介绍CAS操作前,我们先简单看一下乐观锁 与 悲观锁这两个常见的锁概念. 悲观锁: 从Java多线程角度,存在着“可见性.原子性.有序性”三个问题,悲观锁就是假设在实际情况中存在着多线程对同一共享的竞 ...

  3. bzoj 1780

    这是一道环上的问题,我们先将一个环展开,再复制一次. 这样,任何一个合法方案一定对应在转换后的序列的一些连续的区间,使得它们的并的长度大于等于圈长. 然后,我们将区间合并一下(就是将一些被其他区间包含 ...

  4. hdu 3507 斜率优化

    我的第一道斜率优化. 就这道题而言,写出原始的方程: dp[i] = min{ dp[j] + (sum[i]-sum[j])2  + M | j in [0,i) } O(n^2)的复杂度肯定超时, ...

  5. noip200204过河卒

    如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点称为对方马的控制点.例如上图 C ...

  6. [转]Android之Activity的几种跳转方式

     1.显示调用方法 Intent intent=new Intent(this,OtherActivity.class);  //方法1 Intent intent2=new Intent(); in ...

  7. PHP自动加载下——PSR4

    1.先来介绍一下PSR规范 PHP-FIG,它的网站是:www.php-fig.org.就是这个联盟组织发明和创造了PSR规范,其中自动加载涉及其中两个规范,一个是PSR0,一个是PSR4, PSR0 ...

  8. Ubuntu中升极下载4.2内核

    http://tech.hexun.com/2015-09-11/179027013.html 从这段话中所表达出的意思可以了解,Linux Kernel 4.3版本已经开始进行,Linus Torv ...

  9. java 调用shell命令

    原文:http://kongcodecenter.iteye.com/blog/1231177 Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   ...

  10. 错误 1 error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead. To disable deprecation, use . See online help for details.

    出现这种警告的原因是因为我们没有使用安全的字符串处理函数.如果想屏蔽这种警告,可以使用: 还可以使用其它的方法,参考: https://www.cnblogs.com/gb2013/archive/2 ...