最近在写一个小项目，遇到一个需求是做一个六边形的图层，鼠标移动上去显示图片。
先看一下最终实现的效果图
主要采用的技术
这个效果的主要css样式有：
- transform: rotate(120deg); 图片旋转
- overflow:hidden; 超出隐藏
- visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置
实现原理
我们使用3层div来实现这个六边形图层，
- 最外层div(boxF)旋转120度，div设置visibility: hidden
- 第二层(boxS)旋转-60度，div设置visibility: hidden
- 第三层(boxT)再旋转-60度，和最外层第二层的旋转正好回转，使视觉看起来没有旋转，div设置visibility: visible
- 经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;
- 鼠标放上去时，图层显示以背景图的形式展示图片
浏览器兼容性处理
- 兼容IE9:-ms-transform:rotate(120deg);
- 兼容firefox:-moz-transform:rotate(120deg);
- 兼容Safari和Chrome:-webkit-transform:rotate(120deg);
- 兼容Opera:-o-transform:rotate(120deg);
- 兼容IE6-8: filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod=’auto expand’);