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. BZOJ 3196 Tyvj 1730 二逼平衡树 树套树 线段树 treap

    http://www.lydsy.com/JudgeOnline/problem.php?id=3196 http://hzwer.com/2734.html 线段树套treap,似乎splay也可以 ...

  2. bzoj1123 Blockade

    Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...

  3. bzoj1393 旅游航道

    Description SGOI旅游局在SG-III星团开设了旅游业务,每天有数以万计的地球人来这里观光,包括联合国秘书长,各国总统和SGOI总局局长等.旅游线路四通八达,每天都有总躲得载客太空飞船在 ...

  4. Java高级架构师（一）第40节：更多模块的基本功能和配置

  5. Map中keySet和entrySet的区别

    在Map集合中 values():方法是获取集合中的所有的值----没有键,没有对应关系, KeySet():将Map中所有的键存入到set集合中.因为set具备迭代器.所有可以迭代方式取出所有的键, ...

  6. ORACEL 创建表空间

    注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...

  7. ASCII表 基本记忆 -- C

    /* ASCII表规则记忆 我们仅仅要记住了一个字母或数字的 ASCII 码 (比如记住 A 为 65 , 0 的 ASCII 码为 48 ), 知道对应的大写和小写字母之间差 32. 0 -- 32 ...

  8. c#面试3（选择题）

    1.下列有关基本类的大小不正确的是 A.int类型是4个字节 B.bool类型是1个字节 C.long类型是8个字节 D.char类型是一个字节 3.有关数组说法不正确的是 A.数组的内存是分配在栈中 ...

  9. React的第一个例子

    准备: 官网:https://facebook.github.io/react/downloads.html Github地址:https://github.com/facebook/react 首先 ...

  10. [转] NSMapTable 不只是一个能放weak指针的 NSDictionary

    NSMapTable 不只是一个能放weak指针的 NSDictionary NSMapTable是早在Mac OS X 10.5(Leopard)的引入集合类.乍一看,这似乎是作为一个替换NSDic ...