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=" ...
随机推荐
- Script:SQL调优健康检查脚本
Script:SQL调优健康检查脚本 http://www.askmaclean.com/archives/sql-tuning-health-check-script.html 以下脚本可以用于收集 ...
- Linux下一个CD翻录 创CUE 压缩flac攻略
于Windows我们通常使用较低EAC翻录压缩发生器CUE找工作的步骤,但在Linux在稍微有点麻烦.每一步,我们需要自己做.经过我的反复尝试寻找和总结了相当不错的方法,使用软件和步骤如下面的. 使用 ...
- 【POJ3612】【USACO 2007 Nov Gold】 1.Telephone Wire 动态调节
意甲冠军: 一些树高给出.行一种操作:把某棵树增高h,花费为h*h. 操作完毕后连线,两棵树间花费为高度差*定值c. 求两种花费加和最小值. 题解: 跟NOIP2014 D1T3非常像. 暴力动规是O ...
- backup mysql for xtrabackup with xbstream and lz4
极品暂时mysql加入一个实例,采用xtrabackup最简单的速度. 在现有数据节点上: /home/work/app/xtrabackup-2.2.3/innobackupex --ibbacku ...
- Android用户界面设计：框架布局（转）
摘要:框架布局是Android开发者组织视图控件最简单和最有效的布局之一.通过本文,你将学到所有关于框架布局的知识,它们主要用来在屏幕上组织特别的或重叠的视图控件.使用得当的话,很多有趣的Androi ...
- ExtJS4 动态生成grid出口excel(纯粹的接待)
搜索相当长的时间,寻找一些样本,因为我刚开始学习的原因,大多数人不知道怎么用.. 他曾在源代码.搞到现在终于实现了主下载.. 表的采集格不重复下载一个小BUG,一个使用grid初始化发生的BUG 以下 ...
- js中document.write()使用方法
<script> var hrf = window.location.href; if(hrf.indexOf('change')>0){ ...
- 大数据系列修炼-Scala课程07
由于昨天下班后有点困,就没有来及写博客,今天会把它补上!把这个习惯坚持下去! 关于Scala高阶函数详解 1.Scala高阶函数代码实现:高阶函数就是在我们函数中套用函数 2.高阶函数代码详解:高阶函 ...
- WebService到底是什么？ [转]
一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...
- AlloyRenderingEngine
AlloyRenderingEngine燃烧的进度条 写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine HTML 5新增了progre ...