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

一、希望实现的效果

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

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

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

二、实现方法

每幅图片的翻转效果都是沿着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. 为终端配置proxy

    转自:https://my.oschina.net/u/818848/blog/677225?p=1 做开发的同学,应该都会经常接触终端,有些时候我们在终端会做一些网络操作,比如下载gradle包等, ...

  2. 项目中引入kafka

    项目如果需要引入kafka,可以从以下几个流程走: 1.pom文件引对应的jar包 <dependency> <groupId>org.apache.kafka</gro ...

  3. python接口自动化：requests+ddt+htmltestrunner数据驱动框架

    该框架分为四个包:xc_datas.xc_driven.xc_report.xc_tools. xc_datas:存放数据,xc_driven:存放执行程序,xc_report:存放生成的报告,xc_ ...

  4. keras recall

    # accuracy, fmeasure, precision,recall def mcor(y_true, y_pred): y_pred_pos = K.round(K.clip(y_pred, ...

  5. unittest中的断言方法

    方法        用途 assertEqual(a,b)      a=b assertNotEqual(a,b)    a!=b assertTrue(x)     x为True assertFa ...

  6. 2019JS必看面试题

    2019JS必看面试题:https://www.jianshu.com/p/f1f39d5b2a2e 1. javascript的typeof返回哪些数据类型. 答案:string,boolean,n ...

  7. 该项目不知道如何运行配置文件 IIS Express。The project doesn’t know how to run the profile IIS Express

    原文:该项目不知道如何运行配置文件 IIS Express. 方案1(推荐). 可能原因是:禁用掉Microsft ASP.NET和Web工具扩展和微软Azure的应用程序服务工具扩展,恢复启用即可. ...

  8. CentOS服务器开放端口

    拿到服务器之后接着之前的通信步骤进行,却发现怎么也连接不上.最后发现是因为服务器端的端口5000没有开放.下面记录一下开放端口的过程. 使用命令 netstat -anp 查看端口开放情况.如果显示命 ...

  9. 爬虫之selenium 安装与 chromedriver安装

    今天学到一个有意思的插件,就是chromedriver,在爬虫的时候,如果网站反爬虫做的很好,自己又很想爬去里面的数据,那就可以用这个插件,虽然笨笨的,慢的一批,但是还有别的办法就不会用他啦, 这个东 ...

  10. JS中对象的定义及相关操作

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...