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>