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. 初级游戏外挂编程详解 windows运行原理+游戏辅助编程 游戏外挂编程

    详解游戏辅助编程 [目录] 1-什么是Windows API 2-Windows进程 3-Windows 的内存的运行原理 4-windows 中句柄的概念 5-Windows的变量类型 6-辅助实现 ...

  2. WCF安全 z

    WCF custom authentication using ServiceCredentials The generally accepted way of authenticating a us ...

  3. Wpf 系列

    http://www.cnblogs.com/chillsrc/category/684419.html

  4. Oracle基本命令（一）

    1.create user username identified by password;//建用户名和密码oracle ,oracle 2.grant connect,resource,dba t ...

  5. QT的动画效果 抖动 下坠 透明 最近在开发QT收藏了好多链接

    http://blog.csdn.net/liang19890820/article/details/51888114

  6. 【深入理解JAVA虚拟机】第4部分.程序编译与代码优化.1.编译期优化。这章编译和实战部分没理解通，以后再看。

    1.概述 1.1.编译器的分类 前端编译器:Sun的Javac. Eclipse JDT中的增量式编译器(ECJ)[1].  把*.java文件转变成*.class文件 JIT编译器:HotSpot ...

  7. 云来储存型XSS漏洞+越权修改应用封面

    0x001. 今天本来想看看场景应用有什么新功能没,于是乎随便打开了一个场景应用,然后上传了一张图片修改下封面,结果我看到firefox 网络竟然有2个post,不由得勾起我的好奇心,好奇害死猫嘿嘿. ...

  8. NET Core Web API下事件驱动型架构CQRS架构中聚合与聚合根的实现

    NET Core Web API下事件驱动型架构在前面两篇文章中,我详细介绍了基本事件系统的实现,包括事件派发和订阅.通过事件处理器执行上下文来解决对象生命周期问题,以及一个基于RabbitMQ的事件 ...

  9. c++ 读取文本问题

    c++文本操作有以下三个方法 ifstream,ofstream,fstream 读取文本常用的方法如下 std::ifstream input; input.open(".log" ...

  10. 用npm-run自动化任务（转）

    自动构建JavaScript有不少好工具.不过其实很少有人知道,npm run命令就能很好地完成这一任务,配置起来也很简单. script npm会在项目的package.json文件中寻找scrip ...