HTML和CSS實現圖片翻轉效果

時間 2020-05-21

標籤 html css 實現圖片翻轉效果欄目 HTML 简体版

原文原文鏈接

實現圖片翻轉，首先來分析一下咱們但願實現的是怎樣的翻轉效果？又該如何去實現呢？css

1、但願實現的效果html

頁面上的圖片在光標懸停在上面的時候會發生翻轉效果，翻轉事後顯示出背面的說明文字。web

鼠標沒有懸停在上面的效果spa

鼠標懸停在其中一張圖片上的效果：3d

2、實現方法code

每幅圖片的翻轉效果都是沿着Y軸進行反轉的，能夠是用3D變換來實現這種效果。下面來具體分析實現的各個步驟。orm

HTML結構部分：htm

一、首先將變換圖片和文字放在一個父容器中，由於設置了五張圖片因此須要五個父容器。這五個父容器又被放置在一個div（舞臺）內進行變換。blog

二、在每一個父容器裏面有包含兩個部分：(1) 正面顯示的圖片(2)背面的說明文字圖片

三、最後採用層定位，讓圖片和文字部分出現疊加的效果，通過3D變換後面的文字就會被顯示出來。

CSS樣式部分：

一、首先默認樣式清零，規定圖片（img）的寬高，爲主體部分（body）設置背景顏色（這裏的是#7a4390）

二、爲最外面的"舞臺"（.piclist），設置寬高和位置（垂直方向200px，水平方向上居中）。

三、設置父容器樣式（.picbox），浮動定位排列一行，寬高和外邊距，因爲父元素裏面包含須要變換的內容，要爲其定義3D變換（transform-style:preseve-3d）,變換完成時間1.5s；設置層定位的方式相對定位

鼠標懸停在父容器上時發生繞Y軸的180°旋轉

四、設置父容器裏的內容（.box）圖片和文字共同的效果，寬高。內容絕對定位

內容是絕對定位父元素相對定位，脫離文檔流定位，失去原有的位置，從而發生堆疊效果

五、正面圖片的樣式（.front）邊框、爲了美觀加入邊框陰影。

六、背面文字樣式（.back）背景顏色、邊框、文字樣式。設置初始狀態下就翻轉180°

下面是實現代碼

HTML部分

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圖片翻轉</title>
 6     <link rel="stylesheet" href="圖片翻轉.css">
 7 </head>
 8 <body>
 9     <div class="piclist">
10         <div class="picbox">
11             <div class="box front"><img src="wf1.jpg" alt=""></div>
12             <div class="box back"><h2>炫酷方塊</h2></div>
13         </div>
14         <div class="picbox">
15             <div class="box front"><img src="wf2.jpg" alt=""></div>
16             <div class="box back"><h2>炫酷方塊</h2></div>
17         </div>
18         <div class="picbox">
19             <div class="box front"><img src="wf4.jpg" alt=""></div>
20             <div class="box back"><h2>炫酷方塊</h2></div>
21         </div>
22         <div class="picbox">
23             <div class="box front"><img src="wf5.jpg" alt=""></div>
24             <div class="box back"><h2>炫酷方塊</h2></div>
25         </div>
26         <div class="picbox">
27             <div class="box front"><img src="wf6.jpg" alt=""></div>
28             <div class="box back"><h2>炫酷方塊</h2></div>
29         </div>
30     </div>
31 </body>
32 </html>

CSS部分

 1 *{
 2  margin:0;
 3  padding:0; 
 4 }
 5 body{
 6  background: #7a4390;
 7 }
 8 img{
 9  width:200px;
10  height:200px;
11 }
12 .piclist{
13  width:1200px;
14  height:400px;
15  margin:200px auto;
16 }
17 .picbox{
18  float:left;
19  width:200px;
20  height:200px;
21  margin:auto;
22  margin:10px;
23  position:relative;
24     /*父元素裏面包含須要變換的內容，因此設置爲3D變換*/
25  -webkit-transform-style: preserve-3d;
26  -moz-transform-style: preserve-3d;
27  -ms-transform-style: preserve-3d;
28  transform-style: preserve-3d;
29  transition:1.5s;
30     /*設置在1.5s內完成變換*/
31 }
32 .picbox:hover{
33  transform:rotateY(180deg);
34 }
35 .box{
36  width:200px;
37  height:200px;
38  position:absolute 39     }
40 .front{
41  border:2px solid #ddd;
42  box-shadow:10px 10px 10px #aaa;
43 }
44 .back{
45  -webkit-transform: rotateY(180deg);
46  -ms-transform: rotateY(180deg);
47  -o-transform: rotateY(180deg);
48  transform: rotateY(180deg);
49  background: #8b4373;
50  border:2px solid #ddd;
51 }
52 .back h2{
53  color: white;
54  text-align: center;
55 }

但願有所幫助~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。