flip 翻转效果 css3实现
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实现的更多相关文章
- 图片触及翻转效果 css3
实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果: html: <!DOCTYPE HTML> <html> <head> <meta ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- css3 利用perspective实现翻页效果和正方体 以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- CSS3+HTML5特效2 - 翻转效果
先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
随机推荐
- 记一次初步Linux提权
前言. 提权这么久了 还是头一次提下Linux的服务器... 由于之前一直钻研的win服务器 要不是前些日子爆出来Struts2-045漏洞 估计还没时间接触Linux提权.... 正文. st2 ...
- 课堂实验-Bag
这次的课堂实验比较简单,但尴尬的是竟然没有做出来,自己的代码能力下降了不少.IDEA的Junit测试出了问题.所以这次实验是和结对伙伴结对编程写的. public class Bag<T> ...
- fir.im Weekly - 嘘，关于***！
上 Github 交友刷 StackOverflow 解惑,是攻城狮必备技能,加快打怪练级速度.关于,@左耳朵耗子 在微博上分享了一篇文档,轻一点教你建一个VPN服务器,重一点到教你在路由器上***, ...
- ElasticSearch学习笔记--1、安装以及运行
Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎,多的我就不细说了. 相关实验环境 Centos:7.3 ElasticSearch:5.6 java:1.8 1. ...
- Android ConstraintLayout约束控件链接整理
Android新特性介绍,ConstraintLayout完全解析 探索Android ConstraintLayout布局 了解使用Android ConstraintLayout
- [转]java中Collections.sort排序详解
Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能:如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e, ...
- mongoDB系列之（一）：10分钟玩转mongoDB
1. mongoDB是什麽 mongodb是时下流行的NoSql数据库,它的存储方式是文档式存储,并不是Key-Value形式. 存储在集合中的文档,被存储为键-值对的形式.键用于唯一标识一个文档,为 ...
- ASP.NET获取文件的相关知识
string filePath = FileUpload1.PostedFile.FileName;//获取上传文件的路径 string fileName = filePath.Substring(f ...
- HDFS API基本操作
对HDFS API基本操作都是通过 org.apache.hadoop.fs.FileSystem类进行的,以下是一些常见的操作: package HdfsAPI; import java.io.Bu ...
- Redmine 邮件配置
高版本号的Redmine是没有email.yml的.是和configuration.yml合并了.仅仅要配置configuration.yml即可了. 首先得说下Redmine的邮件,配置这个邮件,是 ...