原理:利用css3的transform:rotate 属性!旋转三个包含关系的长方形即可,因为子级可以继承父级的rotate属性所以用下面的方法就可以实现!
方法:父级旋转120deg,子级旋转 -60deg,孙子级旋转 -60deg !
demo
下面是结构代码
<body>
<!-- 第一排六边形 -->
<div class="lineT">
<!-- 六边形父级 -->
<div class="box">
<!-- 六边形子级 -->
<div class="boxF">
<!-- 六边形孙子级 -->
<div class="boxS">
<!-- 内容区 -->
<div class="boxT">
<div class="overlay">
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT">
<div class="overlay">
<div></div>
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT">
<div class="overlay">
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lineS">
<div class="box">
<div class="boxF">
<div class="boxS">
<div class="boxT">
<div class="overlay">
<div></div>
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT">
<div class="overlay">
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
css代码
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;
}
/*第一排与第二排父级样式*/
.lineT,.lineS{
position: absolute;
height: 200px;
}
.lineS{
left: 110px;
top: 186px;
}
/*父级*/
.box{
position: relative;
width: 900px;
height: 200px;
}
/*三个长方形及内容区宽高,必须设定overflow*/
.boxF,.boxS,.boxT,.overlay{
width: 200px;
height: 250px;
overflow: hidden;
line-height: 250px;
}
/*六边形父级旋转120deg*/
.boxF{
transform: rotate(120deg);
float: left;
margin-left: 20px;
}
/*子级旋转回来-60deg*/
.boxS{
transform: rotate(-60deg);
}
/*孙子级旋转-60deg*/
.boxT{
transform: rotate(-60deg);
background-color: #999;
position: relative;
}
/*内容样式*/
.overlay{
background-color: yellow;
opacity: 0;
position: absolute;
z-index: 2;
top: 0;
left: 0;
transition: opacity 1s ease;
}
.overlay:hover{
opacity: 1;
}