目标效果：
要达到蜂巢形的图集展示，实质上就是做六边形图片。
实现思路：
1.一个大div内有两个子div，分别将两个div顺时针和逆时针旋转60度，形成六边形；
2.给三个div加同一个背景，调节背景大小和位置，使得三张图片完全重合，形成六边形图片效果；
3.复制粘贴5个六边形，并做flex布局。
第一步：画出3个div
第二步：
2-1 给1一个div加同一个背景图片并调节位置，大小：
2-2 给另外两个div也加上背景，并调节角度：
2-3 调节背景图片位置，使得三张图片完全重合，形成六角形图片效果：
附上单个六边形完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bee</title>
<style>
.rotate{
position:relative;
height:110px;
width:190px;
margin:100px 10px;
background:url('./face.jpg'); /*给div设置背景图*/
background-size:auto 220px; /*六边形上下两个对角是220，所以需要保证图片有220px*/
background-position: -15px -55px; /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/
}
.common{
position: absolute;
height:100%;
width:100%;
overflow: hidden;
left:0;
}
.common:before{
content:'';
position: absolute;
background:url('./face.jpg') 50% 50% no-repeat;
background-size:auto 220px;
width:190px;
height:220px;
}
.green{
transform: rotate(60deg); /*绿色div顺时针旋转60°*/
/* border:3px solid green; */
}
.green:before{
transform: rotate(-60deg) translate(48px,-28px)
}
.red{
transform: rotate(-60deg); /*红色div逆时针旋转60°*/
/* border:1px solid red; */
}
.red:before{
transform: rotate(60deg) translate(-48px,-28px)
}
</style>
</head>
<body>
<div class="rotate">
<div class="green common"></div>
<div class="red common"></div>
</div>
</body>
</html>第三步：布局
3-1 复制粘贴5个六边形，并将上面三个六边形和下面两个分别放进a标签后再放入父div内：
<div class="box box1"> <!--flex布局是对父元素进行操作，所以在第一行六边形外套一个div-->
<a href="#"> <!--加伪类选择器hover，所以把六边形放在a标签内-->
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
</div>
<div class="box"> <!--flex布局是对父元素进行操作，所以在第二行六边形外套一个div-->
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
</div>3-2 flex布局，调整六边形位置，并加上鼠标悬停动画：
.box{
display: flex;
justify-content:center; /*子元素的六边形居中显示*/
}
.box1{
margin-top:80px; /*调节第一行六边形距离浏览器顶部位置*/
}
.rotate:hover{
transform:translate(-5px,-5px); /*当鼠标hover在六边形上时向左上位移5px*/
}最后，附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bee</title>
<style>
.box{
display: flex;
justify-content:center; /*子元素的六边形居中显示*/
}
.box1{
margin-top:80px; /*调节第一行六边形距离浏览器顶部位置*/
}
.rotate{
position:relative;
height:110px;
width:190px;
margin:37px 10px;
background:url('./face.jpg'); /*给div设置背景图*/
background-size:auto 220px; /*六边形上下两个对角是220，所以需要保证图片有220px*/
background-position: -15px -55px; /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/
}
.rotate:hover{
transform:translate(-5px,-5px); /*当鼠标hover在六边形上时向左上位移5px*/
}
.common{
position: absolute;
height:100%;
width:100%;
overflow: hidden;
left:0;
}
.common:before{
content:'';
position: absolute;
background:url('./face.jpg') 50% 50% no-repeat;
background-size:auto 220px;
width:190px;
height:220px;
}
.green{
transform: rotate(60deg); /*绿色div顺时针旋转60°*/
/* border:3px solid green; */
}
.green:before{
transform: rotate(-60deg) translate(48px,-28px)
}
.red{
transform: rotate(-60deg); /*红色div逆时针旋转60°*/
/* border:1px solid red; */
}
.red:before{
transform: rotate(60deg) translate(-48px,-28px)
}
</style>
</head>
<body>
<div class="box box1"> <!--flex布局是对父元素进行操作，所以在第一行六边形外套一个div-->
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
</div>
<div class="box"> <!--flex布局是对父元素进行操作，所以在第二行六边形外套一个div-->
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
<a href="#">
<div class="rotate ">
<div class="green common"></div>
<div class="red common"></div>
</div>
</a>
</div>
</body>
</html>如有不妥之处，欢迎交流指正！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
