css图片6边形,CSS3 实现六边形Div图片展示效果-CSDN博客

一. 效果图

二. 原理讲解

这个效果用到的主要知识点：

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;

}