CSS3 实现六边形Div图片展示效果

二. 原理讲解

这个效果用到的主要知识点：

1. transform: rotate(120deg); 图片旋转

2. overflow: hidden; 超出隐藏

3. visibility: hidden; 也是隐藏，与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果（注: 3层 div 的大小是一样的）。最外层 div(boxF) 旋转120度，第二层 (boxS) 旋转-60度，第三层 (boxT) 再旋转-60度，此时刚好回正。我们的图片就放在第3层的 div 背景中。因为前两层 div 中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层 div 设置 visibility: hidden; 而第3层 div 是放图片的，需要显示出来，因此设置 visibility: visible; （注: 如果你不对第3层 div 设置 visibility: visible; 那它默认就会继承第二层 div(boxS) 的 visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个div都设置 overflow:hidden;

经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高比例必须满足4：5，不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 div(overlay)，这个 div 是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在 div(overlay) 里面有个a标签，里面是个 + 号，点击 a 标签则弹出层，显示大图（注: 这个 js 效果暂时没写）。

三. 上面效果图的DEMO代码
多行

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 实现六边形图片展示效果</title><style type="text/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;}.clear{clear: both;}       .box{position: relative;width: 630px;margin: 100px auto;}.lineF, .lineS{position: absolute;visibility: hidden;}.lineS{top: 182px;left: 105px;}.boxF, .boxS, .boxT, .overlay{width: 200px;height: 250px;overflow: hidden;}.boxF, .boxS{visibility: hidden;}.boxF{transform: rotate(120deg);float: left;margin-left: 10px;-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% center;background-size: 125% auto;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);visibility: visible;}.overlay{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%;top: 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;}</style>
</head>
<body><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>
</body>
</html>

单个

        <!-- background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3987907653,720009510&fm=26&gp=0.jpg') 50% 50%  --><!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 实现六边形图片展示效果</title><style type="text/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;}.clear{clear: both;}       .box{position: relative;}.lineF, .lineS{position: absolute;visibility: hidden;}.lineS{top: 182px;left: 105px;}.boxF, .boxS, .boxT, .overlay{width: 200px;height: 250px;overflow: hidden;}.boxF, .boxS{visibility: hidden;}.boxF{transform: rotate(120deg);float: left;margin-left: 10px;-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% center;background-size: 200% auto;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);visibility: visible;}.overlay{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%;top: 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;}</style>
</head>
<body><div class="box"><!--第一行(lineFirst)--><div class="lineF"><div class="boxF"><div class="boxS"><div class="boxT" style="background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3987907653,720009510&fm=26&gp=0.jpg');"><div class="overlay"><a href="#">+</a></div></div></div></div></div></div>
</body>
</html>

CSS3 实现六边形Div图片展示效果相关推荐

css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
jqery图片展示效果
好久没更新了,加一个jqery图片展示效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
[推荐]令人震撼的图片展示效果
导读: 令人震撼的图片展示效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.o ...

CSS3 实现六边形Div图片展示效果

CSS3 实现六边形Div图片展示效果相关推荐

最新文章

热门文章