CSS图片翻转例子


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* entire container, keeps perspective */
/**
* 【perspective: number|none;】
* 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
* 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
*/
.flip-container {perspective: 1000;}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
.flip-container, .front, .back {width: 320px;height: 480px;}
/* flip speed goes here */
/**
* 【transition: property duration timing-function delay;】
* 过渡动画 (transition: width 2s;)
* transition-property:规定设置过渡效果的 CSS 属性的名称。(width)
* transition-duration:规定完成过渡效果需要多少秒或毫秒。(2s)
* transition-timing-function:规定速度效果的速度曲线。(ease-in-out)
* transition-delay:延迟时间,以秒或毫秒计。
*/
/**
* 【transform-style: flat|preserve-3d;】
* 使被转换的子元素保留其 3D 转换
* flat:子元素将不保留其 3D 位置。
* preserve-3d:子元素将保留其 3D 位置。
*/
.flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;}
/* hide back of pane during swap */
/**
* 【backface-visibility: visible|hidden;】
* 定义当元素背面是否可见。
*/
.front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}
/* front pane, placed above back */
.front {z-index: 2;}
/* back, initially hidden pane */
.back {transform: rotateY(180deg);}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- 前面内容 -->
<a href="http://www.webhek.com/css-flip/">
<img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hacker.jpg"/><br />
</a>
</div>
<div class="back">
<!-- 背面内容 -->
<a href="http://www.webhek.com/css-flip/">
<img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hack-logo.jpg" style="width: 100%;height: 100%;"/>
</a>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> </script>
</body>
</html>
来自<http://www.webhek.com/css-flip/>
CSS图片翻转例子的更多相关文章
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- HTML+CSS之光标悬停图片翻转效果
设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...
- HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- Javascript实现图片翻转
使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...
- 纯CSS 3D翻转一个面(翻转导航菜单 立方体)
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
随机推荐
- openNebula Image上传
Rack:ruby webserver框架 https://rack.github.io/ 文件上传使用基于tempfile 库 文件上传要经历两个过程: 1.上传文件传到opennebule sun ...
- Jquery基础:append、prepend、after、before、appendTo的区别
append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容. after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容. appendTo() 仍然是在被选元 ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标
Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...
- linux的webserver配置与管理——创建用户个人主页
本实验用的是RedHat linux9.0,在虚拟机上进行操作,它已具有相当完好的可视化界面,这样用户会更加easy接受和理解. 首先呢就是虚拟机的相关配置,这个就不说了,当我们安装完系统后,打开终端 ...
- hihocoder #1178 : 计数 暴力
#1178 : 计数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/problemset/problem/1178 ...
- .NET正则基础——.NET正则类及方法应用
1 概述 初学正则时,对于Regex类不熟悉,遇到问题不知道该用哪种方法解决,本文结合一些正则应用的典型应用场景,介绍一下Regex类的基本应用.这里重点进行.NET类的介绍,对于正则的 ...
- 关于sources.list和apt-get [转载]
个人觉得,Debian最大的方便在于用apt-get安装软件,apt-get的工作原理大概是这种:/etc/apt/sources.list文件中保存着一些server的设置,在这些server上有大 ...
- Visual Studio Code 1.0.1 for python
1. 安 F1健 ext install python E:\test\.vscode下的三个文件 2.launch.json { "version": "0.1.0&q ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...