HTML+CSS之光标悬停图片翻转效果
设计思路：
首先做一个包括图片和说明文字的简单的页面结构，然后再设置它的变换。将变换的元素，即照片和文字放在一个父容器里面，这就需要四个父容器 ，再将这四个父容器放在最外层的舞台上面进行变换，在每个父容器里面都包括两部分：一个是上面的图片，还有一个是下面的说明文字。最后采用层定位将图片和下面的说明文字让它有一个叠加的效果。先显示这个图片，当鼠标悬停在上面的时候，由于做了3D变换，（即每幅图片翻转的效果是围绕Y轴翻转180度来进行的），那么后面的文字就会被显示出来。
㈠HTML主页文件的基本结构
先做一个整个需要变换元素它的一个结构。最外层有一个舞台，放在一个盒子里面，给舞台起一个名字，叫“piclist”。由于当前的舞台只用到一个，就使用ID来进行引用，用“#”号来定义，舞台里面有四组需要变换的元素，做4个盒子作为父容器，给父容器起一个名字，叫“picbox”，采用class来引用这个样式，父容器里面有两个部分需要变换的元素，正面部分放入图片，背面部分放入说明的文字。正面和背面都有共同的样式，将它们共同的样式用class来引用，放在face这样的一个共同样式里面。正面的图片有一个单独的样式，将它放在front这样的一个样式里面来引用；背面的文字也有一个单独的样式，将它放在back里面来引用。这就是当前的父容器的结构。我们再设置一下容器里面图片和文字的内容，其中图片采用相对路径进行添加。
我们简单的设置一下CSS样式部分：首先将默认样式清零，设置页面的背景颜色为深蓝色，直接在body标签里面进行设置。
当前的基本结构和样式就已经设置完了，让我们看一下代码是如何编写的。
下面就是代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
} </style>
</head>
<body>
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="data:images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</body>
</html>
效果图如下：
㈡CSS样式设置后展开的效果
在上面的基础上将样式细化一下。首先设置舞台的样式：设置舞台的高度，宽度，也就是舞台的大小，这个数字是根据里面元素的大小设定的。设置舞台的位置：垂直方向距离上边距有100px的距离，水平方向居中显示。设置四个父容器的样式：四个父容器作为一个盒子，排列为一行，设置它们的浮动为向左浮动，再设置它们的高度，宽度，外边距，最重要的是由于父元素它需要里面包含需要变换的内容，设置3D变换（编辑器里面采用trsf扩展生成），将它的值设置为preserve-3d，这种变换不是一下子就变换过来的，而是渐进的变换，设置transition，让它在1.5s内完成变换，这是对于父容器的初步设定。
设置在父容器里面鼠标悬停在上面的时候来进行的3D变换：沿着Y轴翻转180度。父容器里面两个需要变换的元素，它们共同的效果就像扑克牌的两面一样。那么来设置face的样式：先设置高和宽，进一步设置正面放置图片的这一面的样式，设置它的边框为2个像素实线，为了配合咖啡的颜色，设置边框颜色为棕色，再设置背面的样式，设置它的背景颜色是咖啡色，边框为2个像素，实线，白色来显示，背面的文字用白色显示，文本内容水平居中。
下面是CSS样式设置后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
}
/*舞台*/
#piclist{
width:760px; /*170*4+10*8*/
height: 220px;/*190+边框*/
margin: 100px auto;
}
/*容器*/
.picbox{
float: left;
/*position: relative;*/
width: 170px;
height: 190px;
margin: 10px;
/*3d——双面效果*/
transform-style:preserve-3d;
transition:1.5s;
}
/*舞台鼠标悬停，就翻转，
正面背面互换*/
.picbox:hover{
transform:rotateY(180deg);
}
.face{
/*position: absolute;*/
width:170px;
height:190px;
}
.front{
border:2px solid #4b2518;
}
.back{
/*让它成为背面，开始只显示正面*/
/*transform:rotateY(180deg); */
background-color: #4b2518;
border:2px solid #fff;
}
.back h3{
color:white;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="data:images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</div>
</body>
</html>
效果图如下：
★ 当前的图片和文字已经设置好，而且鼠标悬停在上面也有渐进翻转的效果，但是有两个问题：
⑴图片和文字的关系没有形成正反面的关系；
⑵当鼠标悬停在上面的时候，会发现背面的文字已经被翻转过来，相当于反着写的字。
★我们最后要实现的效果是当前没有翻转的效果，那么如何做到这一点呢？
将背面的文字初始状态下就先翻转一下，当鼠标停留在上面的时候，它又被翻转回来，那么就形成正常字序的文字了。
㈢完整效果代码
设置层定位。需要在父元素，也就是父容器里面设置它的层定位的方式，将父元素设置成相对定位，子元素无论是正面还是背面，它都应该是一个绝对定位，再将背面设置成初始状态就是翻转的，那么让初始状态下翻转180度。
完整的代码如下面所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
}
/*舞台*/
#piclist{
width:760px; /*170*4+10*8*/
height: 220px;/*190+边框*/
margin: 100px auto;
}
/*容器*/
.picbox{
float: left;
position: relative;
width: 170px;
height: 190px;
margin: 10px;
/*3d——双面效果*/
transform-style:preserve-3d;
transition:1.5s;
}
/*舞台鼠标悬停，就翻转，
正面背面互换*/
.picbox:hover{
transform:rotateY(180deg);
}
.face{
position: absolute;
width:170px;
height:190px;
}
.front{
border:2px solid #4b2518;
}
.back{
/*让它成为背面，开始只显示正面*/
transform:rotateY(180deg);
background-color: #4b2518;
border:2px solid #fff;
}
.back h3{
color:white;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="data:images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="data:images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</div>
</body>
</html>
效果图如下：
由于用了层定位，那么父元素是相对定位，两个子元素都是相对于父元素的一个绝对定位，所以意味着两个子元素原有文档流的位置丢失，那么它们就会层叠在一起，而且初始状态下，我们就已经将文字翻转180度，那么光标停留在上面的时候，它又被翻转回来，就形成了最终的效果。
以上就是css3中3D变换的示例——鼠标悬停在图片上翻转背面的文字说明的全部代码和效果图。希望有所帮助。
HTML+CSS之光标悬停图片翻转效果的更多相关文章
- HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 使用CSS的clip-path实现图片剪切效果
最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对应位置的画框. clip-path 今天要说的主题是:如何剪切原图中的部分图片?(前 ...
- 使用css鼠标移动到图片放大效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- css3鼠标悬停图片抖动效果
提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
随机推荐
- Centos磁盘空间不足,找不到占用文件
服务器报警,系统"/"空间不足,但找不到哪些文件占用. 1.使用du -sh *,层层目录查看依然找不到 2.使用"lsof / | grep -i delete&quo ...
- BUUOJ misc 二维码
一个二维码,扫一下是提示:secret is here 用binwalk看一下: binwalk QR_code.png DECIMAL HEXADECIMAL DESCRIPTION ------- ...
- hue改保存记录条数
参考: https://blog.csdn.net/liaoxiaoyi121121/article/details/80541901 需求: 开发需要保存查询记录的条数从10万改到100万 /etc ...
- Employee Free Time
We are given a list schedule of employees, which represents the working time for each employee. Each ...
- mysql 错误号码1129
SQLyog连接mysql 错误号码1129: mysql error 1129: Host 'bio.chip.org' is blocked because of many connection ...
- Minicom 简单使用
一. 什么是minicom 1.1. minicom 是linux 下的一个串口调试工具 二. minicom的使用 2.1. 进入设置 sudo minicom -s 2.1.1. 串口设置 i. ...
- golang中格式化符号说明
%v 值的默认格式表示 %+v 类似%v,但输出结构体时会添加字段名 %#v 值的Go语法表示 %T 值的类型的Go语法表示 %% 百分号 布尔值: %t 单词true或false 整数: %b 表示 ...
- 图片哈希概论及python中如何实现对比两张相似的图片
Google 以图搜图的原理,其中的获取图片 hash 值的方法就是 AHash. 每张图片都可以通过某种算法得到一个 hash 值,称为图片指纹,两张指纹相近的图片可以认为是相似图片. 以图搜图的原 ...
- springboot(十六)-swagger2
SpringBoot整合Swagger2 相信各位在公司写API文档数量应该不少,当然如果你还处在自己一个人开发前后台的年代,当我没说,如今为了前后台更好的对接,还是为了以后交接方便,都有要求写API ...
- 记一些使用mpvue时遇到的问题
一.在mpvue中使用vuex(和在vue中使用不同) 1.vue中使用vuex,在main.js中: import store from './store' new Vue({ store }) ...