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. python3-开发进阶Flask的基础

    一.概述 最大的特点:短小精悍.可拓展强的一个Web框架.注意点:上下文管理机制,依赖wsgi:werkzurg 模块 二.前奏学习werkzurg 先来回顾一个知识点:一个类加括号会执行__init ...

  2. 01-项目简介Springboot简介入门配置项目准备

    总体课程主要分为4个阶段课程: ------------------------课程介绍------------------------ 01-项目简介Springboot简介入门配置项目准备02-M ...

  3. CentOS 6.9通过RPM安装EPEL源（http://dl.fedoraproject.org）

    另类的装法,通过RPM包直接安装 wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm & ...

  4. Django 中文显示

    Django中文显示: 1.如要在.py文件中显示中文,在文件首行加上:# -*- coding: utf-8 -*- 2.如要在html文件中显示中文,要将文件保存为UTF-8格式 3.在setti ...

  5. 使用Dragablz快速构建Chrome样式的可拖拽分离的Tab页程序

    今天发现了一个可以快速实现类似于Chrome方式的可拖拽分离的Tab页程序Dragablz.它可以实现动态创建,删除Tab页,并支持拖拽后形成独立窗口和窗口合并.   使用起来还是非常方便的. < ...

  6. PHP 函数之 call_user_func &amp; call_user_func_array

    call_user_func_array (callable $callback, array $param_arr) 參数1: 调用一个回调函数, 參数2: 数组參数是回调函数的參数. call_u ...

  7. 使用IE9、FireFox与Chrome浏览WPF Browser Application(.XBAP)的方式

    最近开始写一些WPF的小Sample和文章,但是毕竟WPF应用程式不像Silverlight那么方便的只要装个Plugin就可以透过浏览器来看执行结果,因此把脑筋动到了改用WPF Browser Ap ...

  8. 在WPF中显示动态GIF

    在我们寻求帮助的时候,最不愿意听到的答复是:很抱歉,在当前版本的产品中还没有实现该功能... 在WPF中显示动态的GIF图像时便遇到了这样的问题,WPF中强大的Image控件却不支持动态的GIF(其只 ...

  9. bash中的浮点数处理

        Bash中的变量没有数据类型的定义,这样,在处理字符串和数值时会带来麻烦.例如,使用-eq比较数值,==比较字符串等.另外,Bash中常用的let.expr仅支持整数运算,不支持浮点数计算.要 ...

  10. EntityFramework：我想我需要和 Session.Save 语义一样的方法

    背景 EntityFramework 中 DbSet.Add 方法不会导致立即执行 insert 语句,这在长事务中非常有用,不过多数用例都是短事务的,为何我需要一个立即执行 insert 语句的方法 ...