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. Virtual Judge SPOJ - LCS2 Longest Common Substring II

    https://vjudge.net/problem/SPOJ-LCS2 SPOJ注册看不到验证码,气到暴毙,用vjudge写的. 注意!(对拍的时候发现)这份代码没有对只有一个字符串的情况进行处理! ...

  2. phpRedis函数使用总结

    /*1.Connection*/ $redis = new Redis(); $redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超 ...

  3. nginx 访问第三方服务（1）

    nginx提供了两种全异步方式来与第三方服务通信,分别是upstream和subrequest. upstream:nginx为代理服务器,作消息透传.将第三方服务的内容原封不动的返回给用户. sub ...

  4. [转]ViewPager 详解（三）---PagerTabStrip与PagerTitleStrip添加标题栏的异同

      目录(?)[-] 一PagerTitleStrip Class Overview XML布局文件 重写适配器的getPageTitle函数 变量 初始化 重写CharSequence getPag ...

  5. 2015 UESTC 数据结构专题D题 秋实大哥与战争 变化版本的线段树，合并区间，单点查询

    D - 秋实大哥与战争 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/59 D ...

  6. HTML5 本地存储（Web Storage）

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...

  7. iOS学习之iOS沙盒(sandbox)机制和文件操作复习

    1.iOS沙盒机制 iOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本文件等. ...

  8. ELM320 OBD(PWM) to RS232 Interpreter

    http://elmelectronics.com/DSheets/ELM320DS.pdf

  9. Druid如何自动根据URL自动识别DriverClass的

    Druid是根据url前缀来识别DriverClass的,这样使得配置更方便简洁. 前缀 DriverCLass 描述信息 jdbc:odps com.aliyun.odps.jdbc.OdpsDri ...

  10. 开源Word读写组件DocX介绍与入门

    来源:http://i.cnblogs.com/EditPosts.aspx?opt=1 读写Offic格式的文档,大家多少都有用到,可能方法也很多,组件有很多.这里不去讨论其他方法的优劣,只是向大家 ...