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

一、希望实现的效果

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

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

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

二、实现方法

每幅图片的翻转效果都是沿着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. Delphi的类与继承

    既然已经做出了com程序用delphi来开发的决定,那当然就要对delphi进行一些深入的了解.有人说delphi是一个用控件堆砌起来的工具,和vb没什么两样:也有人说dephi实际上是面向过程的,他 ...

  2. 正则表达式——推荐使用 Unicode 编码

      常见的正则表达式的文档都是关于英文(ASCII字符)的,英文开发者通常也只需要处理ASCII字符,不需要处理中文这类多字符的字符.不过,依照李处ASCII字符的方式处理中文字符,就有可能出错.   ...

  3. java一周学习记录（2017/12/2）

    姓名:Danny                               日期:2017/12/2 周日 周一 周二 周三 周四 周五 周六 所花时间 120 150 190 150 180 28 ...

  4. 应用安全 - CMS - ThinkCMF - 漏洞汇总

    ThinkCMF X1.6.0-X2.2.3任意内容包含漏洞 Date: 2019.10 类型: 任意文件写入导致远程代码执行 影响范围: ThinkCMF X1.6.0 ThinkCMF X2.1. ...

  5. eclipse sts 快捷键

    1. ctrl + m 全屏/取消全屏 2.快速切换上面标签 ctrl + pageup/pagedown   : 标签左右切换 ctrl + < > : 标签前后访问处切换 New Ja ...

  6. 如何实现Django settings配置功能

    首先研究Django的settings有何功能,1 提供了两个settings配置模块,一个是系统默认配置模块global_settings.py;和提供给用户自定义设置的settings模块sett ...

  7. PostgreSQL设计之初的大量论文

    引自:https://www.docs4dev.com/docs/zh/postgre-sql/11.2/reference/biblio.html#STON86 该网站是一个PostgreSQL手册 ...

  8. Socket通讯-C#客户端与Java服务端通讯(发送消息和文件)

    设计思路 使用websocket通信,客户端采用C#开发界面,服务端使用Java开发,最终实现Java服务端向C#客户端发送消息和文件,C#客户端实现语音广播的功能. Java服务端设计 packag ...

  9. apachectl 命令详解-graceful 不中断原有连接,重新启动 Apache 服务器

    apachectl(Apache control interface) 参         数: fullstatus     显示服务器完整的状态信息. graceful     重新启动 Apac ...

  10. python打包命令

    打包成exe方法 (1)切换到该文件夹 (2)pyinstaller -F py文件 (py文件要英文才行) -F 生成单个可执行文件 -w 去掉控制台窗口 -p 自定义需要加载的类路径 -i 可执行 ...