CSS3 实现六边形Div图片展示效果
效果图：
实现原理：
这个效果的主要css样式有：
1.>transform: rotate(120deg); 图片旋转
2.>overflow:hidden; 超出隐藏
3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置
我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible; （ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高不要相等，不然得到的就不是6边形了。
在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay)，这个div是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在div(overlay)里面有个a标签，里面是个+号，点击a标签则弹出层，显示大图（ps:这个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>
想看效果，直接将DEMO代码复制就行了。IE9以下版本不支持。
CSS3 实现六边形Div图片展示效果的更多相关文章
- JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- html/css 图片展示效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- lightbox图片展示效果
1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- css实现六边形图片（最简单易懂方法实现高逼格图片展示）
不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
随机推荐
- hdu4770:Lights Against Dudely（回溯 + 修剪）
称号:hdu4770:Lights Against Dudely 题目大意:相同是n*m的矩阵代表room,房间相同也有脆弱和牢固之分,如今要求要保护脆弱的房间.须要将每一个脆弱的房间都照亮,可是牢固 ...
- poj 2482 Stars in Your Window(扫描线)
id=2482" target="_blank" style="">题目链接:poj 2482 Stars in Your Window 题目大 ...
- Android定调的发展
首先,介绍一下Android系统支持的铃声格式. 有下面几种: 64赫兹Midi,AAC.AAC+.AMR.WAV.MP3.Real Audio.WMA.OGG等格式. 将音频文件设置成铃声非常eas ...
- Cytoscape画图初探
Cytoscape是一个做网络图的js插件.用起来非常方便,并且非常强大.这是它的站点:点击打开链接 使用它须要导入两个文件,一个是js文件,一个是css文件.官网上下载. 这里实现了一个功能.即从后 ...
- paip.将数据导入到在英语语音数据库mysql道路解决空原则问题
paip.将数据导入到在英语语音数据库mysql道路解决空原则问题 #---原因:mysql 导入工具bug #---解决:不要使用双引号括注音. 笔者 老哇爪 Attilax 艾龙. EMAIL: ...
- nefu117 素数个数的位数，素数定理
素数个数的位数 Time Limit 1000ms Memory Limit 65536K description 小明是一个聪明的孩子,对数论有着非常浓烈的兴趣.他发现求1到正整数10n 之间有多少 ...
- unity 编辑器和插件生产（四.2）
上次 我们告诉编辑器制作,如何将图像加载到现场,如今 我们要告诉下.怎么样 制造UIButton以及UIimage交换. 阿土. 进入专题. 首先,我们要明白 unity机制.button属性等. 首 ...
- 动手学习TCP：数据传输（转）
前面的文章介绍了TCP状态变迁,以及TCP状态变迁图中的一些特殊状态. 本文主要看看TCP数据传输过程中需要了解的一些重要点: MSS(Maximum Segment Size) Seq号和Ack号的 ...
- typedef和define具体的具体差异
1) #define这是一个预处理指令,简单的更换当预处理程序.不检查的正确性,仍不能正常关机进入的意思,那里只是已被展开时编译源代码会发现可能的错误和错误. 例如: #define PI 3.1 ...
- 开始折腾cocos2d-x，使用批处理来创建项目
开始服用的时间来学习cocos2d-x该,尽管C和C++另外不咋.只是学习和记忆可能是更深层次的,现在发展: so从今天开始正式决定学会与自己的业余时间折腾吧,仅这51什么.昨天,在开发环境中建,Vi ...