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. POJ 3764 The xor-longest Path trie树解决位运算贪心

    http://poj.org/problem?id=3764 题意 :  一颗树,每个边有个值,在树上找一条简单路径,使得这条路径上的边权异或值最大 先找到所有节点到一点的距离 , 显然dis( x ...

  2. [CODECHEF]EASYEX

    题意:有一个$k$面的骰子,上面的数字为$1\cdots k$,现在要丢$n$次骰子,设$n$次中有$a_i$次扔到数字$i$,给定$l,f$,求$\prod\limits_{i=1}^la_i^f$ ...

  3. Android 应用内多进程实现

    android平台支持多进程通信,也支持应用内实现多进程那么多进程应该能为我们带来什么呢我们都知道,android平台对应用都有内存限制,其实这个理解有点问题,应该是说android平台对每个进程有内 ...

  4. ElasticSearch学习笔记--1、安装以及运行

    Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎,多的我就不细说了. 相关实验环境 Centos:7.3 ElasticSearch:5.6 java:1.8 1. ...

  5. 2349 Arctic Network(中文版)

    试题描述: 国防部希望通过无线网络连接几个北方前哨基地. 在建立网络时将使用两种不同的通信技术:每个前哨基站都将拥有无线电收发器,另外还有一些前哨卫星通道. 任何带卫星频道的两个前哨都可以通过卫星进行 ...

  6. linq to datatable 和lambda查询datatable

    用Linq查询DataTable static DataTable table = new DataTable(); static DataColumn dc = new DataColumn(); ...

  7. [转]Intent和IntentFilter详解

        Intent   Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描 ...

  8. PAT甲级1057. Stack

    PAT甲级1057. Stack 题意: 堆栈是最基础的数据结构之一,它基于"先进先出"(LIFO)的原理.基本操作包括Push(将元素插入顶部位置)和Pop(删除顶部元素).现在 ...

  9. activemq消息重发机制[转]

    大家知道,JMS规范中,Message消息头接口中有setJMSRedelivered(boolean redelivered)和getJMSRedelivered()方法,用于设置和获取消息的重发标 ...

  10. “请不要直接访问超全局$_GET数组”

    下载了一个名为NetBeans的IDE开发PHP程序,当我输入常用的的$name = $_GET['name'];时却收到警告:请不要直接访问超全局$_GET数组 请改用某些过滤函数(例如filter ...