dfdfdfdfdf

<!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图片翻转例子的更多相关文章

  1. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  2. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  3. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  4. HTML和CSS实现图片翻转效果

    实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...

  5. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  6. Javascript实现图片翻转

    使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...

  7. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

  8. 原生js如何实现图片翻转旋转效果？

    原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...

  9. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

随机推荐

  1. win8下hosts保存文档失败,提示：请检查文件是否被另一个应用程序打开

    选择文件,然后右键点击属性,然后进入"安全"选项卡下点击当前用户对用的用户名然后编辑权限,给予完全控制的权限. 如图: 图一:

  2. ANDROID FRAMENT的切换（解决REPLACE的低效）

    http://www.cnblogs.com/android-joker/p/4414891.html 在项目中切换Fragment,一直都是用replace()方法来替换Fragment.但是这样做 ...

  3. Java浮点值拒绝服务漏洞危害分析

    By 空虚浪子心 http://www.inbreak.net/ JAVA出了漏洞,CVE-2010-4476,会导致拒绝服务攻击.大家能从公告上,看到这样一段代码,挺长的.意思是只有开发人员写出这样 ...

  4. Java多线程:线程死锁

    发生死锁的原因通常是两个对象的锁相互等待造成的. 以下用一个实例来构造这样的情况: package basic.e_deadlock; import org.apache.log4j.Logger; ...

  5. MySQL mysqldump数据导出详解 --dump-slave 注意事项

    http://www.cnblogs.com/chenmh/p/5300370.html 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工 ...

  6. mysql管理员操作

    mysql查帮助手册的技巧:help 你的命令:比如 help create; >>显示mysql中用户:select host,user from mysql.user; >> ...

  7. hdu1050 Moving Tables

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1050 求区间上点的最大重叠次数. #include <stdio.h> #include &l ...

  8. 代码片段------find批量处理

    应用案例: 当前目录下有若干目录,有多个目录下有一个名叫build.sh的脚本,但是没有可执行权限,现在要将所有的build.sh假如可执行权限. pengdl@debian:~/work/SDK_3 ...

  9. 小白日记46：kali渗透测试之Web渗透-SqlMap自动注入（四）-sqlmap参数详解- Enumeration,Brute force,UDF injection,File system,OS,Windows Registry,General,Miscellaneous

    sqlmap自动注入 Enumeration[数据枚举] --privileges -U username[CU 当前账号] -D dvwa -T users -C user --columns  [ ...

  10. GCT考试如何准备

    备战考试篇 回首连续的3个月的那段复习过程,感受颇多颇深!以下就各科复习,我谈谈自己的感受和经验: 语文复习: 语文主要是考察你的文学功底和素养以及已经具备的工作生活的常识.从03,04两年的考试真题 ...