一. 效果圖

二. 原理講解

這個效果用到的主要知識點 ：

1.?transform: rotate(120deg); 圖片旋轉

2. overflow: hidden; 超出隱藏

3. visibility: hidden; 也是隱藏，與 display:none; 相似，但不同的是，它雖然隱藏了，但依然會在網頁中占有位置

我們要用到3層div進行旋轉來得到這個效果(注: 3層 div 的大小是一樣的)。最外層 div(boxF) 旋轉120度，第二層 (boxS) 旋轉-60度，第三層 (boxT) 再旋轉-60度，此時剛好回正。我們的圖片就放在第3層的 div 背景中。因為前兩層 div 中沒有東西，純粹就是用來旋轉得到6邊形的，所以對1，2層 div 設置 visibility: hidden; 而第3層 div 是放圖片的，需要顯示出來，因此設置 visibility: visible; (注: 如果你不對第3層 div 設置 visibility: visible; 那它默認就會繼承第二層 div(boxS) 的 visibility: hidden; )。經過旋轉肯定有超出的部分，因此對3個div都設置 overflow:hidden;

經過旋轉和對超出部分的隱藏我們就可以得到我們想要的6邊形了。還有一點要注意，那就是div的寬高比例必須滿足4：5，不然得到的就不是6邊形了。在上面的效果圖片中。我們在第三層 (boxT) 里面還放置了一個 div(overlay)，這個 div 是用于遮罩的，當鼠標移到6邊形上時，會有遮罩效果。在 div(overlay) 里面有個a標簽，里面是個 + 號，點擊 ?a 標簽則彈出層，顯示大圖(注: 這個 js 效果暫時沒寫)。

三. 上面效果圖的DEMO代碼

CSS3 實現六邊形圖片展示效果

body, div, img, ul, li{margin:0;padding:0;

}body{font-size:12px;background-color:#DDD;min-width:1200px;

}ul, ul li{list-style:none;

}.clear{clear:both;

}.box{position:relative;width:630px;margin:100px auto;

}.lineF, .lineS{position:absolute;visibility:hidden;

}.lineS{top:182px;left:105px;

}.boxF, .boxS, .boxT, .overlay{width:200px;height:250px;overflow:hidden;

}.boxF, .boxS{visibility:hidden;

}.boxF{transform:rotate(120deg);float:left;margin-left:10px;-ms-transform:rotate(120deg);-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);

}.boxS{transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);

}.boxT{transform:rotate(-60deg);background:no-repeat 50% center;background-size:125% auto;-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);visibility:visible;

}.overlay{transition:all 250ms ease-in-out 0s;display:none;position:relative;

}.overlay:hover{background-color:rgba(0,0,0,0.6);

}.boxT:hover .overlay{display:block;

}.overlay a{display:inline-block;position:absolute;left:50%;top:50%;margin:-16px 0 0 -16px;border-radius:3px;background-color:#d3b850;text-align:center;line-height:32px;width:32px;height:32px;text-decoration:none;color:White;font-size:18px;font-weight:bolder;

}

+

總結

以上是生活随笔為你收集整理的css图片6边形,CSS3 实现六边形Div图片展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。