原文: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图片展示效果的更多相关文章

  1. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  2. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  3. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  4. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  5. html/css 图片展示效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. lightbox图片展示效果

    1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...

  7. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  8. css实现六边形图片(最简单易懂方法实现高逼格图片展示)

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

  9. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

随机推荐

  1. Canvas rontate(旋转) 使用误区

    context.setTransform(1,0,0,1,0,0);//重置转换为初始化状态 var angleInRadians = 45 * Math.PI / 180;var width = 4 ...

  2. hibernate 双向n-n

    领域模型: 关系数据模型 双向 n-n 关联须要两端都使用集合属性 双向n-n关联必须使用连接表 集合属性应添加 key 子元素用以映射外键列, 集合元素里还应添加many-to-many子元素关联实 ...

  3. cocos2dx 子弹飞作为一个例子来解释解酒效果类CCMotionStreak

    感谢点评与关注,欢迎转载与分享. 勤奋努力,持之以恒! 在游戏开发中,有时会须要在某个游戏对象上的运动轨迹上实现渐隐效果.比方子弹的运动轨迹,假设不借助引擎的帮助.这样的效果则须要通过大量的图片来实现 ...

  4. BZOJ 3505 CQOI 2014 数三角形 数学

    标题效果:到m*n该网络格,问:有网络格是一个三角形的顶点的数目. 思维:数学.首先计算所有三个相同的,不.然后,在上线的一个点失去了三个点是其中.需要注意的是,答案开放long long. CODE ...

  5. 在.NET Fiddle有趣的沙盒代码

    在.NET Fiddle有趣的沙盒代码 笔者:Tony Patton | 托尼·巴顿译:PurpleEndurer,2014-11-18,第1版 C#和VB.NET开发者能够使用.NET Fiddle ...

  6. 【剑指offer】:Q44:直扑克

    def IsContinuous(seq, num = 5): zeros = 0; d = 0 seq = sorted(seq) for i in range(num - 1): if seq[i ...

  7. Nio得知3——该示范基地:多路复用器模式

    Reactor模式和NIO 本文可以看作是Doug Lea Scalable IO in Java一文的翻译. 当前分布式计算 Web Services盛行天下,这些网络服务的底层都离不开对socke ...

  8. 面向对象三大特征之多态——Java笔记(七)

    多态:     同一个实体同时具有多种形式     编译时的类型有声明该变量时使用的类型决定,运行时的类型有实际赋值给变量的对象决定     如果编译时类型和运行时类型不同,就出现多态 例: clas ...

  9. 一些有用的javascript实例分析(一)

    原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...

  10. kobject_create_and_add

    本文来源于源linux 3.14.3版本号/lib/kobject.c文件 /**  * kobject_create_and_add - 动态地创建kobject结构和寄存器sysfs  *  * ...