通过旋转三个div实现正六边形图片展示

对三个矩形div进行旋转，box1>box2>box3依次嵌套，在样式中统一设置宽高，这里的宽高不是随便定义，需要计算一下，矩形的宽即是六边形的边长，知道正六边形内角是120度，那么作虚线可以在小直角三角形中求得矩形的高度(本例高度值实际为346.41016151377545，直接取的整数)。
知道div宽高后，开始旋转操作，从最外层box1开始旋转120度，此时三个div是一块旋转的，然后box2旋转-60度，最后box3同样旋转-60度，那么box3已经回到原位了，并且三个div之间的角度已经出来了，可以通过加边框线来看效果。
注意：三个div一定要加overflow: hidden;
效果图如下：

给三个矩形加上边框线并注释overflow: hidden;就可以直白的看得出来是怎么组成的：

贴上代码：

    <div class="