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. IIS 无法安装URL重写模块的解决办法 UrlReWrite （.NET`SQL技术交流 群号206656202）

    下载和安装URL Rewrite IIS8默认是没有安装URL重写工具的,必须要自己下载安装. 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开I ...

  2. 【Leetcode】【Medium】Letter Combinations of a Phone Number

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  3. ESP32D0WDQ6 灯泡 黑客

    这个黑客表现得如何聪明 灯泡 可能泄漏您的Wi-Fi密码O网页链接破解者博客详文 Pwn the LIFX Mini white O网页链接ESP32D0WDQ6, a SoC from ESPRES ...

  4. February 11 2017 Week 6 Saturday

    Love means never having to say you're sorry. 爱就是永远不必说对不起. Yesterday I heard an interesting story fro ...

  5. She must be at least thirty-five years old.

    She must be at least thirty-five years old. Though life's goodness can at times be overshadowed,it i ...

  6. S/4HANA生产订单的标准状态和透明工厂原型状态的映射

    事务码CO03查看生产订单的状态: 从下面的界面能看出S/4HANA里生产订单在任意时刻可能存在多个状态: 生产订单的ID和状态ID的关系是1:N,维护在数据库表VSAUFK里: 如何把上述SAP系统 ...

  7. python UI自动化实战记录九：添加日志

    想知道测试脚本运行到了哪一步,在脚本内关键节点处打日志是一个很好的方法.目前只写最简单的方式,logging相关还需要继续深入. 1  引包,并配置info级别以上的都显示 import loggin ...

  8. Codeforces Round #436 (Div. 2)【A、B、C、D、E】

    Codeforces Round #436 (Div. 2) 敲出一身冷汗...感觉自己宛如智障:( codeforces 864 A. Fair Game[水] 题意:已知n为偶数,有n张卡片,每张 ...

  9. hdu 6214 Smallest Minimum Cut[最大流]

    hdu 6214 Smallest Minimum Cut[最大流] 题意:求最小割中最少的边数. 题解:对边权乘个比边大点的数比如300,再加1 ,最后,最大流对300取余就是边数啦.. #incl ...

  10. java的串行化

    参考博客:Java 对象的串行化(Serialization) 1,什么是串行化 对象的寿命通常随着生成该对象的程序的终止而终止.有时候,可能需要将对象的状态保存下来,在需要时再将对象恢复.我们把对象 ...