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

一、希望实现的效果

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

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

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

二、实现方法

每幅图片的翻转效果都是沿着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. Matlab——图形绘制——二维平面图形

    二维平面图形 hold on ————在已画好的图形上添加新的图形 plot 是绘制一维曲线的基本函数,但在使用此函数之前,我们需先定义曲线上每一点的x 及y 座标.下例可画出一条正弦曲线: > ...

  2. Linux常用命令梳理——文件管理（一）

    由于本人目前仍是萌新一枚,所以<Linux常用命令梳理>系列仅依照个人目前掌握的知识,对一部分命令进行梳理,目的是为了对之前学到的知识进行巩固.当然了,如果机缘巧合被大家看到了,也欢迎各位 ...

  3. 【ABAP系列】SAP 面试 ABAPer的一些感想

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 面试 ABAPer的一些 ...

  4. YARN日志聚合相关参数配置

    日志聚合是YARN提供的日志中央化管理功能,它能将运行完成的Container/任务日志上传到HDFS上,从而减轻NodeManager负载,且提供一个中央化存储和分析机制.默认情况下,Contain ...

  5. TCP/IP笔记——UDP

    OSI模型中最下面的两层用来解决两个硬件设备在物理上的通信问题(如规定怎么将电平信号转换为数字信号),相对应的TCP/IP模型中,这部分代表将会将机器封装为一个MAC地址来实现通讯.网络层是关于,具体 ...

  6. lsb-realse

    [root@localhost ~]# lsb_release -a -bash: lsb_release: command not found 解决方法:yum install redhat-lsb ...

  7. python 序列解包（解压缩）

    序列解包(解压缩) 所学的解压缩 如果我们给出一个列表,我们需要一次性取出多个值,我们是不是可以用下面的方式实现呢? name_list = ['nick', 'egon', 'jason'] x = ...

  8. 要了解mysql原理，还是要心里有点B树才行

      要了解数据库索引的底层原理,我们就得先了解一种叫树的数据结构,而树中很经典的一种数据结构就是二叉树!所以下面我们就从二叉树到平衡二叉树,再到B-树,最后到B+树来一步一步了解数据库索引底层的原理! ...

  9. BloomFilter&python支持

    BloomFilter&python支持 BloomFilter 布隆过滤器是一种概率空间高效的数据结构.它与hashmap非常相似,用于检索一个元素是否在一个集合中.它在检索元素是否存在时, ...

  10. drop,delete,truncate 的区别

    (1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作. TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把单独 ...