实现图片翻转，首先来分析一下我们希望实现的是怎样的翻转效果？又该如何去实现呢？

一、希望实现的效果

页面上的图片在光标悬停在上面的时候会发生翻转效果，翻转过后显示出背面的说明文字。

鼠标没有悬停在上面的效果

鼠标悬停在其中一张图片上的效果：

二、实现方法

每幅图片的翻转效果都是沿着Y轴进行反转的，可以是用3D变换来实现这种效果。下面来具体分析实现的各个步骤。

HTML结构部分：

1、首先将变换图片和文字放在一个父容器中，因为设置了五张图片所以需要五个父容器。这五个父容器又被放置在一个div（舞台）内进行变换。

2、在每个父容器里面有包含两个部分：(1) 正面显示的图片(2)背面的说明文字

3、最后采用层定位，让图片和文字部分出现叠加的效果，经过3D变换后面的文字就会被显示出来。

CSS样式部分：

1、首先默认样式清零，规定图片（img）的宽高，为主体部分（body）设置背景颜色（这里的是#7a4390）

2、为最外面的"舞台"（.piclist），设置宽高和位置（垂直方向200px，水平方向上居中）。

3、设置父容器样式（.picbox），浮动定位排列一行，宽高和外边距，由于父元素里面包含需要变换的内容，要为其定义3D变换（transform-style:preseve-3d）,变换完成时间1.5s；设置层定位的方式 相对定位

鼠标悬停在父容器上时发生绕Y轴的180°旋转

4、设置父容器里的内容（.box）图片和文字共同的效果，宽高。内容绝对定位

内容是绝对定位父元素相对定位，脱离文档流定位，失去原有的位置，从而发生堆叠效果

5、正面图片的样式（.front）边框、为了美观加入边框阴影。

6、背面文字样式（.back）背景颜色、边框、文字样式。设置初始状态下就翻转180°

下面是实现代码

HTML部分

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图片翻转</title>

     <link rel="stylesheet" href="图片翻转.css">

 </head>

 <body>

     <div class="piclist">

         <div class="picbox">

             <div class="box front"><img src="wf1.jpg" alt=""></div>

             <div class="box back"><h2>炫酷方块</h2></div>

         </div>

         <div class="picbox">

             <div class="box front"><img src="wf2.jpg" alt=""></div>

             <div class="box back"><h2>炫酷方块</h2></div>

         </div>

         <div class="picbox">

             <div class="box front"><img src="wf4.jpg" alt=""></div>

             <div class="box back"><h2>炫酷方块</h2></div>

         </div>

         <div class="picbox">

             <div class="box front"><img src="wf5.jpg" alt=""></div>

             <div class="box back"><h2>炫酷方块</h2></div>

         </div>

         <div class="picbox">

             <div class="box front"><img src="wf6.jpg" alt=""></div>

             <div class="box back"><h2>炫酷方块</h2></div>

         </div>

     </div>

 </body>

 </html>

CSS部分

 *{

     margin:;

     padding:;

 }

 body{

     background: #7a4390;

 }

 img{

     width:200px;

     height:200px;

 }

 .piclist{

     width:1200px;

     height:400px;

     margin:200px auto;

 }

 .picbox{

     float:left;

     width:200px;

     height:200px;

     margin:auto;

     margin:10px;

     position:relative;

     /*父元素里面包含需要变换的内容，所以设置为3D变换*/

     -webkit-transform-style: preserve-3d;

     -moz-transform-style: preserve-3d;

     -ms-transform-style: preserve-3d;

     transform-style: preserve-3d;

     transition:1.5s;

     /*设置在1.5s内完成变换*/

 }

 .picbox:hover{

     transform:rotateY(180deg);

 }

 .box{

     width:200px;

     height:200px;

     position:absolute

     }

 .front{

     border:2px solid #ddd;

     box-shadow:10px 10px 10px #aaa;

 }

 .back{

     -webkit-transform: rotateY(180deg);

     -ms-transform: rotateY(180deg);

     -o-transform: rotateY(180deg);

     transform: rotateY(180deg);

     background: #8b4373;

     border:2px solid #ddd;

 }

 .back h2{

     color: white;

     text-align: center;

 }

希望有所帮助~

HTML和CSS实现图片翻转效果的更多相关文章

  1. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  2. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  3. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  4. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  5. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

  6. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  7. CSS 3D图片翻转 ——3D Flipping Effect

    效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

  9. css hover图片hover效果兼容ie8

    例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 模态框——angular

    ui-bootstrap-tpls.js库 $uibModal服务 $uibModalInstance服务 一.在angular中应用modal $uibModal 使用方法:直接注入到控制器中. . ...

  2. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  3. 关于Polyaxon的使用

    1.首先upload代码 polyaxon upload 注意,upload只能在新建notebook前进行,且每次只能upload一次,所以在结束每次项目测试(开发)前,都应该在Polyaxon上修 ...

  4. spark MLlib矩阵四则运算，线性代数

    1.导包请看我的上一篇博文,maven项目的包 https://www.cnblogs.com/wuzaipei/p/10965680.html 2.denseMatirx 矩阵四则运算如下 版本不同 ...

  5. vue分别打包测试环境和正式环境

    vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一.本地------开发环境 二.线上------测试环境 三.线上------正式环境 我们都知道vu ...

  6. python字符串-方法

    一.1. upper()作用:将字符串中字符转换为大写 In [17]: spam Out[17]: 'hello,world' In [18]: print(spam.upper()) HELLO, ...

  7. Windows系统里Oracle 11g R2 Client（64bit）的下载与安装

    环境: windows10系统(64位) 最好先安装jre或jdk(此软件用来打开oracle自带的可视化操作界面,不装也没关系:可以安装plsql,或者直接用命令行操作) Oracle 11g 是仅 ...

  8. list 转 map java8

    // Arrays.asList("a:1.0", "b:2.0", "c:3.0") --> Map {a=1.0, b=2.0, ...

  9. Linux命令学习（0）

    作为一名前端,可能接触到linux的机会并不多,但这不代表就不需要学.对我而言,学习linux主要是为了方便部署我的项目到服务器,我并没有花时间去学这些,只是上网查怎么部署项目,然后按教程一步一步来, ...

  10. 分布式事务解决方案汇总：2PC、3PC、消息中间件、TCC、状态机+重试+幂等（转）

    数据一致性问题非常多样,下面举一些常见例子.比如在更新数据的时候,先更新了数据库,后更新了缓存,一旦缓存更新失败,此时数据库和缓存数据会不一致.反过来,如果先更新缓存,再更新数据库,一旦缓存更新成功, ...