具体效果图如下：

主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

具体的步骤如下：

1、写出页面主体，

 <div>

        <img src="Images/b.jpg" alt="">

        <img src="Images/c.jpg" alt="">

    </div>

2、通过定位使两张图片叠加在一起

  div img {

            width: 250px;

            height: 170px;

            position: absolute;

            top:;

            left:;

            transition: all 1s;

        }

3、设置第一张图片背面不可见

 div img:first-child {

            z-index:;

            backface-visibility: hidden;

        }

4、添加旋转180度

 div:hover img {

            transform: rotateY(180deg);

        }

最后给出完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        /* backface-visibility */

        div {

            width: 250px;

            height: 170px;

            margin: 100px auto;

            position: relative;

        }

        div img {

            width: 250px;

            height: 170px;

            position: absolute;

            top:;

            left:;

            transition: all 1s;

        }

        div img:first-child {

            z-index:;

            backface-visibility: hidden;

        }

        div:hover img {

            transform: rotateY(180deg);

        }

    </style>

</head>

<body>

    <div>

        <img src="Images/b.jpg" alt="">

        <img src="Images/c.jpg" alt="">

    </div>

</body>

</html>

CSS 实例之翻转图片的更多相关文章

  1. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  2. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  3. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  4. 范仁义html+css课程---3、图片和超链接

    范仁义html+css课程---3.图片和超链接 一.总结 一句话总结: img标签是图片标签,定义 HTML 页面中的图像 a标签是超链接标签,用于从一个页面链接到另一个页面. 1.img标签要点? ...

  5. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  6. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  7. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  8. CSS Image Sprite--网页图片应用处理方式

    CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

  9. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

随机推荐

  1. C++与C的联系与区别

    C++与C的联系: C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛.C++支持多种编程范式 --面向对象编程.泛型编程和过程化编程. 其编程领域众广,常用于系统开发,引擎开发等应用领域, ...

  2. vmware workstation 下安装ubuntu

    安装时我是借鉴 https://blog.csdn.net/xiaohua0877/article/details/78507631 期间遇到几个问题 键盘不好使,解决办法是重新运行wmware wo ...

  3. js的继承方式分别适合哪些应用场景？

    一.原型链 利用 Person.prototype = new Animal("Human") 实现继承: static式继承.能继承Animal.prototype.不可多重继承 ...

  4. 复刻smartbits的国产网络测试工具minismb-如何测试协议限速

    复刻smartbits的网络性能测试工具MiniSMB,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和最 ...

  5. MySQL、Mariadb 复制原理

    复制的作用 l  水平扩展 l  数据备份 l  数据分析 l  数据分布 l  高可用性 复制的工作原理 Mariadb的复制功能是基于binlog进行的.复制的工作主要是由主库上Master du ...

  6. windows系统 PHP安装Redis扩展

    cmd开启/关闭redis redis所在路径: D:\redis\Redis-x64-3.2.100 启动: start cmd /k "cd /d D:\redis\Redis-x64- ...

  7. winform窗体 小程序【登录窗体】【恶搞程序】

    登录窗体 using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; ...

  8. 设计模式之工厂方法(FactoryMethod)模式

    在五大设计原则的基础上经过GOF(四人组)的总结,得出了23种经典设计模式,其中分为三大类:创建型(5种).结构型(7种).行为型(11种).今天对创建型中的工厂方法(FactoryMethod)模式 ...

  9. Java面向对象-------多态总结

    1.多态:是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作,如图所示: 多态性是对象多种表现形式的体现. 2.多态作用: 1. 消除类型之间的耦合关系 ...

  10. MapReduce运行原理和过程

    原文 一．Map的原理和运行流程 Map的输入数据源是多种多样的,我们使用hdfs作为数据源.文件在hdfs上是以block(块,Hdfs上的存储单元)为单位进行存储的. 1.分片 我们将这一个个bl ...