六邊形 今天看到別人分享的六邊形學習 自己也試著做了一下 原理： 圖片旋轉 transfrom：rotate（120deg）； 溢出隱藏 overflow：hidden； 我們要用三層div來實現旋轉效果 第一次 rotate（120deg） 第二次 rotate（-60deg） 第三次 rotat ...
六邊形
今天看到別人分享的六邊形學習 自己也試著做了一下
原理：
- 圖片旋轉 transfrom：rotate（120deg）；
- 溢出隱藏 overflow：hidden；
我們要用三層div來實現旋轉效果
第一次 rotate（120deg） 第二次 rotate（-60deg） 第三次 rotate（-60deg）
此時 正好div歸正 我們的圖片放在第三層裡面 第一層和第二層純屬是為了實現六邊形的
圖像剪切成六邊形定有溢出的地方設置溢出隱藏 overflow：hidden
div的寬度必須滿足4:5 不然得到的就不是六邊形了
HTML 部分
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>六邊形圖片展示</title> 6 <link href="css/index.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <!-- section 部分 container 容器 --> 10 <section class="container"> 11 <div class="conbox-1"> 12 <div class="conbox-2"> 13 <div class="conbox-3"> 14 <img src="images/a1.jpg"> 15 <div>風景</div> 16 </div> 17 </div> 18 </div> 19 20 <div class="conbox-1"> 21 <div class="conbox-2"> 22 <div class="conbox-3"> 23 <img src="images/a2.jpg"> 24 <div>風景</div> 25 </div> 26 </div> 27 </div> 28 29 <div class="conbox-1"> 30 <div class="conbox-2"> 31 <div class="conbox-3"> 32 <img src="images/a3.jpg"> 33 <div>風景</div> 34 </div> 35 </div> 36 </div> 37 38 <div class="conbox-1 margin-top margin-left"> 39 <div class="conbox-2"> 40 <div class="conbox-3"> 41 <img src="images/a4.jpg"> 42 <div>風景</div> 43 </div> 44 </div> 45 </div> 46 47 <div class="conbox-1 margin-top"> 48 <div class="conbox-2"> 49 <div class="conbox-3"> 50 <img src="images/a5.jpg"> 51 <div>風景</div> 52 </div> 53 </div> 54 </div> 55 56 </section> 57 </body> 58 </html>
CSS 部分
@charset "utf-8";
* {
margin:0; /* 外邊距 */
padding:0; /* 內邊距 */
}
body {
background-color:#0F9; /* 背景顏色 */
}
.container {
width:650px; /* 寬 */
height:430px; /* 高 */
margin:100px auto; /* 上外邊距和下外邊距100 左右邊距自動 */
}
.conbox-1 {
width:200px;
height:250px;
float:left; /* 左浮動 */
margin-left:10px; /* 左邊距10 */
overflow:hidden; /* 溢出隱藏 */
transform:rotate(120deg);
/* 改變外形 旋轉120deg */
}
.conbox-2 {
width:100%;
height:100%;
overflow:hidden;
transform:rotate(-60deg);
}
.conbox-3 {
width: 100%;
height: 100%;
overflow: hidden;
transform:rotate(-60deg);
position: relative; /* 位置 ： 相對的 */
}
.conbox-3 > div { /* >div 表示 div是.conbox-3的直接子選擇器 */
width:100%;
height:100%;
position:absolute; /* 位置 ： 絕對的 */
top:0;
left:0;
opacity:0; /* opacity 不透明的 */
line-height:250px; /* 線高度 */
text-align:center; /* 文本居中 */
color:#0FF;
cursor:pointer; /* 游標 ： 指針 */
background:url(../images/s.png);
/* 背景圖片 */
transition:opacity 0.3s;
/* 過渡 ： 不透明度時間0.3s */
}
.conbox-3:hover > div {
/* 當游標移入 不透明度改變為1 */
opacity:1;
}
.margin-top {
margin-top:-70px;
}
.margin-left {
margin-left:115px;
}
.clear{
clear: both;
}
此文到此結束
此文參考鏈接 http://doc.okbase.net/similar/archive/109640.html
