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. SQL-SERVER学习（一） 数据表的基本操作

    1.创建一个数据库,数据库的名字是UserInfo create database UserInfo; 2.创建一个数据表,数据表的名字是UserInfocreate table UserInfo( ...

  2. editplus 格式化 js、html、xml、css

    没有文件扩展”js”的脚本引擎的问题的解决办法 解决办法如下: 打开注册表编辑器,定位"HKEY_CLASSES_ROOT" > ".js" 这一项,双击 ...

  3. linux中进入mysql时报错Access denied for user 'root'@'localhost' (using password: YES)解决方案

    之前在linux中装完mysql后直接在命令行窗口输入mysql就会进入数据库了,但是今天输入mysql命令后直接报错,如下图: 之后输入:mysql -uroot -p 提示输入密码:***** 还 ...

  4. linux自动备份oracle数据库

    #此脚本只备份数据表,而且为了方便恢复数据是做的单表逐个备份#在写脚本过程中遇到的报错均加入了解决方案的链接(虽然错误代码没有贴出来)#最终将在脚本所在目录生成年月日-时分的目录,目录下为表名.dmp ...

  5. Dell R720上的系统安装问题的解决办法（关于RAID建立磁盘阵列的技术）

    摘要:本篇是本人在搭建大数量存储.搜索环境时,对于使用Dell PowerEdge R720 and R720xd作为服务器所遇到的一些问题进行的总结. 开始时,我们使用Dell提供的安装光盘(蓝色) ...

  6. 阅读MySQL文档第20章：存储程序和函数

    本文把阅读到的重点摘抄下来. 一.一个子程序要么是一个程序要么是一个函数.使用CALL语句来调用程序,程序只能用输出变量传回值.就像别其它函数调用一样,函数可以被从语句外调用(即通过引用函数名),函数 ...

  7. AWESOME SWIFT-swift.libhunt.com-swift类库网站

    https://swift.libhunt.com/categories/688-events 29 Events libraries and projects ORDERED BY POPULARI ...

  8. SDOI2018R1划水记

    SDOI2018 bless all Day -1 一天无所事事……板子也不想打了 旁边的蚝爷还在不停的AC……果然自动AC机不是白叫的 "8848钛金老蚝,一上课就A题,一下课就学习,每2 ...

  9. PHP 生成全局唯一id

    直接上代码: function generate_global_uniqid() { $prefix = md5(microtime(true)); // 生成唯一ID发生器 prefix,如果为服务 ...

  10. MS17-010复现

    很早之前做的了,今天整理看到了,正好腾到blog上. ########################分割线############################## MS-17-010 攻击者向 ...