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

时间 2020-05-21

标签 html+css html css 光标悬停图片翻转效果栏目 CSS 繁體版

原文原文链接

设计思路：css

首先作一个包括图片和说明文字的简单的页面结构，而后再设置它的变换。将变换的元素，即照片和文字放在一个父容器里面，这就须要四个父容器，再将这四个父容器放在最外层的舞台上面进行变换，在每一个父容器里面都包括两部分：一个是上面的图片，还有一个是下面的说明文字。最后采用层定位将图片和下面的说明文字让它有一个叠加的效果。先显示这个图片，当鼠标悬停在上面的时候，因为作了3D变换，（即每幅图片翻转的效果是围绕Y轴翻转180度来进行的），那么后面的文字就会被显示出来。html

㈠HTML主页文件的基本结构css3

先作一个整个须要变换元素它的一个结构。最外层有一个舞台，放在一个盒子里面，给舞台起一个名字，叫“piclist”。因为当前的舞台只用到一个，就使用ID来进行引用，用“#”号来定义，舞台里面有四组须要变换的元素，作4个盒子做为父容器，给父容器起一个名字，叫“picbox”，采用class来引用这个样式，父容器里面有两个部分须要变换的元素，正面部分放入图片，背面部分放入说明的文字。正面和背面都有共同的样式，将它们共同的样式用class来引用，放在face这样的一个共一样式里面。正面的图片有一个单独的样式，将它放在front这样的一个样式里面来引用；背面的文字也有一个单独的样式，将它放在back里面来引用。这就是当前的父容器的结构。咱们再设置一下容器里面图片和文字的内容，其中图片采用相对路径进行添加。编辑器

咱们简单的设置一下CSS样式部分：首先将默认样式清零，设置页面的背景颜色为深蓝色，直接在body标签里面进行设置。spa

当前的基本结构和样式就已经设置完了，让咱们看一下代码是如何编写的。设计

下面就是代码部分：3d

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>Document</title>  6 <style>  7  *{  8  padding: 0;  9  margin: 0; 10 } 11  body{ 12  background-color:#0D3462; 13 } 14 15 </style> 16 </head> 17 <body> 18 <div id="piclist"> 19 <div class="picbox"> 20 <div class="face front"><img src="images/1.jpg"></div> 21 <div class="face back"><h3>浓缩咖啡</h3></div> 22 </div> 23 <div class="picbox"> 24 <div class="face front"><img src="images/2.jpg"></div> 25 <div class="face back"><h3>卡布奇诺</h3></div> 26 </div> 27 <div class="picbox"> 28 <div class="face front"><img src="images/3.jpg"></div> 29 <div class="face back"><h3>拿铁</h3></div> 30 </div> 31 <div class="picbox"> 32 <div class="face front"><img src="images/4.jpg"></div> 33 <div class="face back"><h3>摩卡</h3></div> 34 </div> 35 </div> 36 </body> 37 </html>

效果图以下：code

㈡CSS样式设置后展开的效果orm

在上面的基础上将样式细化一下。首先设置舞台的样式：设置舞台的高度，宽度，也就是舞台的大小，这个数字是根据里面元素的大小设定的。设置舞台的位置：垂直方向距离上边距有100px的距离，水平方向居中显示。设置四个父容器的样式：四个父容器做为一个盒子，排列为一行，设置它们的浮动为向左浮动，再设置它们的高度，宽度，外边距，最重要的是因为父元素它须要里面包含须要变换的内容，设置3D变换（编辑器里面采用trsf扩展生成），将它的值设置为preserve-3d，这种变换不是一会儿就变换过来的，而是渐进的变换，设置transition，让它在1.5s内完成变换，这是对于父容器的初步设定。htm

设置在父容器里面鼠标悬停在上面的时候来进行的3D变换：沿着Y轴翻转180度。父容器里面两个须要变换的元素，它们共同的效果就像扑克牌的两面同样。那么来设置face的样式：先设置高和宽，进一步设置正面放置图片的这一面的样式，设置它的边框为2个像素实线，为了配合咖啡的颜色，设置边框颜色为棕色，再设置背面的样式，设置它的背景颜色是咖啡色，边框为2个像素，实线，白色来显示，背面的文字用白色显示，文本内容水平居中。

下面是CSS样式设置后的代码：

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>Document</title>  6 <style>  7  *{  8  padding: 0;  9  margin: 0; 10 } 11  body{ 12  background-color:#0D3462; 13 } 14 /*舞台*/ 15  #piclist{ 16  width:760px; /*170*4+10*8*/ 17  height: 220px;/*190+边框*/ 18  margin: 100px auto; 19 } 20 /*容器*/ 21  .picbox{ 22  float: left; 23 /*position: relative;*/ 24  width: 170px; 25  height: 190px; 26  margin: 10px; 27 /*3d——双面效果*/ 28  transform-style:preserve-3d; 29  transition:1.5s; 30 } 31 /*舞台鼠标悬停，就翻转， 32  正面背面互换*/ 33  .picbox:hover{ 34  transform:rotateY(180deg); 35 } 36  .face{ 37 /*position: absolute;*/ 38  width:170px; 39  height:190px; 40 } 41  .front{ 42  border:2px solid #4b2518; 43 } 44  .back{ 45 /*让它成为背面，开始只显示正面*/ 46 /*transform:rotateY(180deg); */ 47  background-color: #4b2518; 48  border:2px solid #fff; 49 } 50  .back h3{ 51  color:white; 52  text-align:center; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="container"> 58 <div id="piclist"> 59 <div class="picbox"> 60 <div class="face front"><img src="images/1.jpg"></div> 61 <div class="face back"><h3>浓缩咖啡</h3></div> 62 </div> 63 <div class="picbox"> 64 <div class="face front"><img src="images/2.jpg"></div> 65 <div class="face back"><h3>卡布奇诺</h3></div> 66 </div> 67 <div class="picbox"> 68 <div class="face front"><img src="images/3.jpg"></div> 69 <div class="face back"><h3>拿铁</h3></div> 70 </div> 71 <div class="picbox"> 72 <div class="face front"><img src="images/4.jpg"></div> 73 <div class="face back"><h3>摩卡</h3></div> 74 </div> 75 </div> 76 </div> 77 </body> 78 </html>

效果图以下：

★ 当前的图片和文字已经设置好，并且鼠标悬停在上面也有渐进翻转的效果，可是有两个问题：

⑴图片和文字的关系没有造成正反面的关系；

⑵当鼠标悬停在上面的时候，会发现背面的文字已经被翻转过来，至关于反着写的字。

★咱们最后要实现的效果是当前没有翻转的效果，那么如何作到这一点呢？

将背面的文字初始状态下就先翻转一下，当鼠标停留在上面的时候，它又被翻转回来，那么就造成正常字序的文字了。

㈢完整效果代码

设置层定位。须要在父元素，也就是父容器里面设置它的层定位的方式，将父元素设置成相对定位，子元素不管是正面仍是背面，它都应该是一个绝对定位，再将背面设置成初始状态就是翻转的，那么让初始状态下翻转180度。

完整的代码以下面所示:

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>Document</title>  6 <style>  7  *{  8  padding: 0;  9  margin: 0; 10 } 11  body{ 12  background-color:#0D3462; 13 } 14 /*舞台*/ 15  #piclist{ 16  width:760px; /*170*4+10*8*/ 17  height: 220px;/*190+边框*/ 18  margin: 100px auto; 19 } 20 /*容器*/ 21  .picbox{ 22  float: left; 23  position: relative; 24  width: 170px; 25  height: 190px; 26  margin: 10px; 27 /*3d——双面效果*/ 28  transform-style:preserve-3d; 29  transition:1.5s; 30 } 31 /*舞台鼠标悬停，就翻转， 32  正面背面互换*/ 33  .picbox:hover{ 34  transform:rotateY(180deg); 35 } 36  .face{ 37  position: absolute; 38  width:170px; 39  height:190px; 40 } 41  .front{ 42  border:2px solid #4b2518; 43 } 44  .back{ 45 /*让它成为背面，开始只显示正面*/ 46  transform:rotateY(180deg); 47  background-color: #4b2518; 48  border:2px solid #fff; 49 } 50  .back h3{ 51  color:white; 52  text-align:center; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="container"> 58 <div id="piclist"> 59 <div class="picbox"> 60 <div class="face front"><img src="images/1.jpg"></div> 61 <div class="face back"><h3>浓缩咖啡</h3></div> 62 </div> 63 <div class="picbox"> 64 <div class="face front"><img src="images/2.jpg"></div> 65 <div class="face back"><h3>卡布奇诺</h3></div> 66 </div> 67 <div class="picbox"> 68 <div class="face front"><img src="images/3.jpg"></div> 69 <div class="face back"><h3>拿铁</h3></div> 70 </div> 71 <div class="picbox"> 72 <div class="face front"><img src="images/4.jpg"></div> 73 <div class="face back"><h3>摩卡</h3></div> 74 </div> 75 </div> 76 </div> 77 </body> 78 </html>

效果图以下：

因为用了层定位，那么父元素是相对定位，两个子元素都是相对于父元素的一个绝对定位，因此意味着两个子元素原有文档流的位置丢失，那么它们就会层叠在一块儿，并且初始状态下，咱们就已经将文字翻转180度，那么光标停留在上面的时候，它又被翻转回来，就造成了最终的效果。

以上就是css3中3D变换的示例——鼠标悬停在图片上翻转背面的文字说明的所有代码和效果图。但愿有所帮助。