CSS3翻转显示另外一张图：

1、backface-visibility:hidden;背面不可见

2、transform:rotate();旋转

（可以把图片换成本地图片看一下效果）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 560px;

            height: 300px;

            position: relative;

            margin: 100px auto;

        }

        .front {

            width: 100%;

            height: 100%;

            position: absolute;

            top: 0;

            left: 0;

        }

        .back {

            position: absolute;

            top: 0;

            left: 0;

        }

        img {

            transition: all 1s ease 0s;

            backface-visibility: hidden;/*背面不可见*/

        }

        .back img {

            transform: rotateX(180deg);/*背面的图先天翻转180deg*/

        }

        .box:hover .front img{

            transform: rotateX(180deg);

        }

        .box:hover .back img {

            transform: rotateX(360deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="front">

            <img src="dog/0.jpg" alt="">

        </div>

        <div class="back">

            <img src="dog/1.jpg" alt="">

        </div>

    </div>

</body>

</html>

CSS翻转小效果的更多相关文章

  1. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  2. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

  5. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  6. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  7. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

随机推荐

  1. ArcGIS 10.1 如何连接数据库(转)

    原文地址:http://blog.csdn.net/arcgis_cs/article/details/7750893 ArcGIS 10.1如何连接数据库 最近在使用ArcGIS 10.1的数据库, ...

  2. android测试Code

    <!--android:layout_alignParentTop="true"--><com.koooke.platform.View.CenterImage ...

  3. SpringMVC学习（五）——拦截器示例

    部分内容摘自开涛的<跟我学SpringMVC.PDF> 拦截器,本质类似于AOP,主要的应用场景: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV等. 2.权限检查 ...

  4. ubuntu配置（娱乐工作）

    因为目前没有使用ubuntu作为工作的电脑(mac还是好用),所以暂时记录一下别人分享的ubuntu常用软件: 输入法:搜狗输入法 虚拟机:virtualbox 浏览器:chromium ide:id ...

  5. openvpn（上）

    VPN概述:(全称Virtual Private Network)虚拟专用网络,是依靠ISP和其他的NSP,在公网中建立专用的数据通信网络的技术,可以为企业之间或者个人与企业之间提供安全的数据传输隧道 ...

  6. nginx知识图谱

    nginx启动起来后有两个进程,一个是主进程,一个是守护进程

  7. RBTree和AVL

      红黑树和AVL的相同:都是平衡二叉树,所以插入删除修改查询都非常高效. 红黑树和AVL的区别: 红黑树:  不是要求绝对平衡,付出的代价是要着色,查询次数可能会多一层,好处是减少旋转次数. AVL ...

  8. 如何理解 Learning to rank

    转:http://hi.baidu.com/christole/item/23215e364d8418f896f88deb What is Rank? rank就是排序.IR中需要排序的问题很多,最常 ...

  9. MSSQL注入常用SQL语句整理

    很多情况下使用工具对mssql注入并不完善,所以我们就需要手工注入,一下是本人收集的一些mssql的sql语句. 手工MSSQL注入常用SQL语句 and exists (select * from ...

  10. 如何在Windows中安装GitHub

    1.使用Git 在Git官网下载Git安装包,双击开始安装即可.安装完毕之后,在Windows中会具有一个Git Bash命令行工具以及一个Git GUI客户端工具. 点击Download即可下载. ...