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. delphi之socket通讯

    使用了2个组建: TServerSocket TClientSocket ------------------TServerSocket--------------------------- //开启 ...

  2. OTRS工单管理系统

    OTRS简介 OTRS的名字是由Open-source Ticket Request System首字母縮略字而来,是一个开源的缺陷跟踪管理系统软件.  OTRS将电话,邮件等各种渠道提交进来的服务请 ...

  3. python mysql安装

    本文主要介绍不同系统mysql安装 mac安装mysql http://blog.csdn.net/pansanday/article/details/54915916   linux安装mysql ...

  4. 【Leetcode】【Medium】Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  5. AutoHotkey批量L版代码转H2的vim脚本

    原脚本尽量用表达式的语法写,错误会比较少,比如"If a=", "fun(a=1)"这种语法在V2会出错文件放vim的autoload目录下,可使用以下map使 ...

  6. July 18th 2017 Week 29th Tuesday

    My heart is stronger now that you are in it. 我的心里有了你,从此变得更强大. You will no longer feel lonely if ther ...

  7. mem系函数总结

    memset(); 原型: void *memset(void *s, int ch, size_t n); 含义:   将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值,块的 ...

  8. bep-10翻译

    dht协议的目的是解放tracter服务器,将tracter的任务分布式存到各个客户端上(即维护资源文件的下载列表,从哪能下载到请求的文件): dht协议在get_peer请求获得peer信息后,就会 ...

  9. 在Windows 10上部署Apache PredictionIO开发环境

    Windows在初研究人员的探索下,研究出了一套更为精简的环境配置,极大的缩短了开发时间与效率,在此总结以供后来者参阅. 1.部署环境的配置 Windows10 64 home IntelliJ ID ...

  10. Excel 移动列操作