CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose

效果图：

实现原理：

这个效果的主要css样式有：

1.>transform: rotate(120deg); 图片旋转

2.>overflow:hidden;  超出隐藏

3.>visibility: hidden;  也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。

最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible; （ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;

经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高不要相等，不然得到的就不是6边形了。

在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay)，这个div是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在div(overlay)里面有个a标签，里面是个+号，点击a标签则弹出层，显示大图（ps:这个js效果暂时没写）

下面给出上面效果图的DEMO代码：

            
 
 
    
                
            
                
                    
                        
                            +                        
                    
                
            
            
                
                    
                        
                            +                        
                    
                
            
            
                
                    
                        
                            +                        
                    
                
            
        
                
            
                
                    
                        
                            +                        
                    
                
            
            
                
                    
                        
                            +                        
                    
                
            
        
    

想看效果，直接将DEMO代码复制就行了。IE9以下版本不支持。