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. centos 7 源码包安装、卸载nginx

    1.源码包安装之前,首页安装依赖包 yum -y install gcc gcc-c++ make libtool zlib zlib-devel openssl openssl-devel pcre ...

  2. mysql性能测试

    mysqlslap mysql自带的工具使用非常方面: 使用语法如下: # mysqlslap [options] 常用参数 [options] 详细说明: --auto-generate-sql, ...

  3. HDU 5651 xiaoxin juju needs help 数学

    xiaoxin juju needs help 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5651 Description As we all k ...

  4. sql中字符分割，日期判断，以及函数的应用

    前两天公司有一个功能需求,客户给出几天的工作时间和休息,然后顾客的访问时间必须要在工作时间之内和休息时间之外,所以要求做一下判断.本来以为这个没什么,谁知道客户提供的工作时间段和休息时间段不定,给出的 ...

  5. Current-sense monitor and MOSFET boost output current

    A previous Design Idea describes a programmable current source that used a three-terminal National S ...

  6. J-LINK序列号修改

    打开J-LINK   COMMANDER中输入 exec setsn=xxxxxxxx 即可

  7. BUZZER Driver

  8. 详解Java中的clone方法 -- 原型模式 及源码

    http://www.cnblogs.com/cq-home/p/6431426.html http://blog.csdn.net/zhangjg_blog/article/details/1836 ...

  9. windows系统上安装与使用Android NDK r8d(一)

    什么是NDK? NDK 提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so 和 java 应用一起打包成apk.这些工具对开发者的帮助是巨大的. NDK 集成了交叉编译器,并 ...

  10. 数据库中MCO

    约束条件指该字段取值的约束条件,“ M ”表示必填.“ C ”表示条件必填.“ O ”表示可填,以下含义同