阅读(12011)
实现原理：
这个效果的主要css样式有：
1.&transform: rotate(120deg); 图片旋转
2.&overflow:& 超出隐藏
3.&visibility:& 也是隐藏，与display:相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置
我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: 而第3层div是放图片的，需要显示出来，因此设置visibility: （ps:如果你不对第3层div设置visibility:那它默认就会继承第二层div(boxS)的visibility: ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高比例必须满足4：5，不然得到的就不是6边形了。
在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay)，这个div是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在div(overlay)里面有个a标签，里面是个+号，点击a标签则弹出层，显示大图（ps:这个js效果暂时没写）
下面给出上面效果图的DEMO代码：
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&CSS3 实现六边形图片展示效果&/title&
&style type="text/css"&
body, div, img, ul, li
margin: 0;
padding: 0;
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
list-style: none;
clear: both;
position: relative;
width: 630px;
margin: 100px auto;
.lineF, .lineS
position: absolute;
visibility: hidden;
top: 182px;
left: 105px;
.boxF, .boxS, .boxT, .overlay
width: 200px;
height: 250px;
overflow: hidden;
.boxF, .boxS
visibility: hidden;
transform: rotate(120deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
transition: all 250ms ease-in-out 0s;
display: none;
position: relative;
.overlay:hover
background-color: rgba(0,0,0,0.6);
.boxT:hover .overlay
display: block;
.overlay a
display: inline-block;
position: absolute;
left: 50%;
margin: -16px 0 0 -16px;
border-radius: 3px;
background-color: #d3b850;
text-align: center;
line-height: 32px;
width: 32px;
height: 32px;
text-decoration: none;
color: White;
font-size: 18px;
font-weight: bolder;
&div class="box"&
&!--第一行(lineFirst)--&
&div class="lineF"&
&div class="boxF"&
&div class="boxS"&
&div class="boxT" style="background-image: url(img/1.jpg);"&
&div class="overlay"&
&a href="#"&+&/a&
&div class="boxF"&
&div class="boxS"&
&div class="boxT" style="background-image: url(img/2.jpg);"&
&div class="overlay"&
&a href="#"&+&/a&
&div class="boxF"&
&div class="boxS"&
&div class="boxT" style="background-image: url(img/3.jpg);"&
&div class="overlay"&
&a href="#"&+&/a&
&!--第二行(lineSecond)--&
&div class="lineS"&
&div class="boxF"&
&div class="boxS"&
&div class="boxT" style="background-image: url(img/4.jpg);"&
&div class="overlay"&
&a href="#"&+&/a&
&div class="boxF"&
&div class="boxS"&
&div class="boxT" style="background-image: url(img/5.jpg);"&
&div class="overlay"&
&a href="#"&+&/a&
想看效果，直接将DEMO代码复制就行了。IE9以下版本不支持。原文链接:
阅读排行榜CSS3 实现六边形Div图片展示效果
实现原理：
这个效果的主要css样式有：
1.&transform: rotate(120deg); 图片旋转
2.&overflow: &超出隐藏
3.&visibility: &也是隐藏，与display:相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置
我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: 而第3层div是放图片的，需要显示出来，因此设置visibility: （ps:如果你不对第3层div设置visibility:那它默认就会继承第二层div(boxS)的visibility: ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高不要相等，不然得到的就不是6边形了。
在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay)，这个div是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在div(overlay)里面有个a标签，里面是个+号，点击a标签则弹出层，显示大图（ps:这个js效果暂时没写）
下面给出上面效果图的DEMO代码：
&!DOCTYPE html&
& & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
& & &title&3 实现六边形图片展示效果&/title&
& & &style type=&text/css&&
& & & & body, div, img, ul, li
& & & & & & margin: 0;
& & & & & & padding: 0;
& & & & body
& & & & & & font-size: 12
& & & & & & background-color: #DDD;
& & & & & & min-width: 1200
& & & & ul, ul li
& & & & & & list-style:
& & & & .clear
& & & & & & clear:
& & & & } & & &&
& & & & .box
& & & & & & position:
& & & & & & width: 630
& & & & & & margin: 100
& & & & .lineF, .lineS
& & & & & & position:
& & & & & & visibility:
& & & & .lineS
& & & & & & top: 182
& & & & & & left: 105
& & & & .boxF, .boxS, .boxT, .overlay
& & & & & & width: 200
& & & & & & height: 250
& & & & & & overflow:
& & & & .boxF, .boxS
& & & & & & visibility:
& & & & .boxF
& & & & & & transform: rotate(120deg);
& & & & & & float:
& & & & & & margin-left: 10
& & & & & & -ms-transform: rotate(120deg);
& & & & & & -moz-transform: rotate(120deg);
& & & & & & -webkit-transform: rotate(120deg);
& & & & .boxS
& & & & & & transform: rotate(-60deg);
& & & & & & -ms-transform: rotate(-60deg);
& & & & & & -moz-transform: rotate(-60deg);
& & & & & & -webkit-transform: rotate(-60deg);
& & & & .boxT
& & & & & & transform: rotate(-60deg);
& & & & & & background: no-repeat 50%
& & & & & & background-size: 125%
& & & & & & -ms-transform: rotate(-60deg);
& & & & & & -moz-transform: rotate(-60deg);
& & & & & & -webkit-transform: rotate(-60deg);
& & & & & & visibility:
& & & & .overlay
& & & & & & transition: all 250ms ease-in-out 0s;
& & & & & & display:
& & & & & & position:
& & & & .overlay:hover
& & & & & & background-color: rgba(0,0,0,0.6);
& & & & .boxT:hover .overlay
& & & & & & display:
& & & & .overlay a
& & & & & & display: inline-
& & & & & & position:
& & & & & & left: 50%;
& & & & & & top: 50%;
& & & & & & margin: -16px 0 0 -16
& & & & & & border-radius: 3
& & & & & & background-color: #d3b850;
& & & & & & text-align:
& & & & & & line-height: 32
& & & & & & width: 32
& & & & & & height: 32
& & & & & & text-decoration:
& & & & & & color: W
& & & & & & font-size: 18
& & & & & & font-weight:
& & &/style&
& & &div class=&box&&
& & & & &!--第一行(lineFirst)--&
& & & & &div class=&lineF&&
& & & & & & &div class=&boxF&&
& & & & & & & & &div class=&boxS&&
& & & & & & & & & & &div class=&boxT& style=&background-image: url(img/1.jpg);&&
& & & & & & & & & & & & &div class=&overlay&&
& & & & & & & & & & & & & & &a href=&#&&+&/a&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & & & &/div&
& & & & & & &div class=&boxF&&
& & & & & & & & &div class=&boxS&&
& & & & & & & & & & &div class=&boxT& style=&background-image: url(img/2.jpg);&&
& & & & & & & & & & & & &div class=&overlay&&
& & & & & & & & & & & & & & &a href=&#&&+&/a&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & & & &/div&
& & & & & & &div class=&boxF&&
& & & & & & & & &div class=&boxS&&
& & & & & & & & & & &div class=&boxT& style=&background-image: url(img/3.jpg);&&
& & & & & & & & & & & & &div class=&overlay&&
& & & & & & & & & & & & & & &a href=&#&&+&/a&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & & & &/div&
& & & & &/div&
& & & & &!--第二行(lineSecond)--&
& & & & &div class=&lineS&&
& & & & & & &div class=&boxF&&
& & & & & & & & &div class=&boxS&&
& & & & & & & & & & &div class=&boxT& style=&background-image: url(img/4.jpg);&&
& & & & & & & & & & & & &div class=&overlay&&
& & & & & & & & & & & & & & &a href=&#&&+&/a&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & & & &/div&
& & & & & & &div class=&boxF&&
& & & & & & & & &div class=&boxS&&
& & & & & & & & & & &div class=&boxT& style=&background-image: url(img/5.jpg);&&
& & & & & & & & & & & & &div class=&overlay&&
& & & & & & & & & & & & & & &a href=&#&&+&/a&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & & & &/div&
& & & & &/div&
& & &/div&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'欢迎光临杨雨的个人博客站!
关注互联网和搜索引擎的个人博客网站
纯css绘制蜂巢六边形效果
发布时间：  编辑：   点击：   
纯CSS绘制的六边形代码如下:&Html&
&title&Draw Hive&/title&
&style type="text/"&
.hexagon {
margin-left: 4
margin-left: 54
margin-top: -28
border: 30px solid #6C6;
border-top:
border-bottom: 30px solid #6C6;
border-left: 52
border-right: 52
.hiveCenter {
width: 104
height: 60
background-color: #6C6;
.hiveBottom {
border: 30px solid #6C6;
border-bottom:
border-top: 30px solid #6C6;
border-left: 52
border-right: 52
&div class="hexagon" id="first"&
&div class="hiveTop"&
&div class="hiveCenter"&
&div class="hiveBottom"&
&div class="hexagon" id="second"&
&div class="hiveTop"&
&div class="hiveCenter"&
&div class="hiveBottom"&
&div class="hexagon" id="third"&
&div class="hiveTop"&
&div class="hiveCenter"&
&div class="hiveBottom"&
&/body&&/Html&
本文地址：/web/css3/4425.html
转载请注明出处。
分享是一种快乐，也是一种美德:
与《纯css绘制蜂巢六边形效果》相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
滇ICP备号-1纯css绘制蜂巢六边形效果-CSS_网页制作-脚本宝典
这篇文章主要介绍了纯绘制蜂巢六边形效果,需要的朋友可以参考下
纯CSS绘制的六边形代码如下:&html& &head& &title&Draw Hive&/title& &/head& &style type="text/css"& .hexagon { display: float: } #second { margin-left: 4 } #third { clear: margin-left: 54 margin-top: -28 } .hiveTop{ width: 0; border: 30px solid #6C6; border-top: border-bottom: 30px solid #6C6; border-left: 52 border-right: 52 } .hiveCenter { width: 104 height: 60 background-color: #6C6; } .hiveBottom { width: 0; border: 30px solid #6C6; border-bottom: border-top: 30px solid #6C6; border-left: 52 border-right: 52 } &/style& &body& &div class="hexagon" id="first"& &div class="hiveTop"& &/div& &div class="hiveCenter"& &/div& &div class="hiveBottom"& &/div& &/div& &div class="hexagon" id="second"& &div class="hiveTop"& &/div& &div class="hiveCenter"& &/div& &div class="hiveBottom"& &/div& &/div& &div class="hexagon" id="third"& &div class="hiveTop"& &/div& &div class="hiveCenter"& &/div& &div class="hiveBottom"& &/div& &/div& &/body&&/html&
分享给好友：