css3制作六边形图片
效果图：
实现原理：
这个效果的主要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的宽高比例必须满足4：5，不然得到的就不是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>
css3制作六边形图片的更多相关文章
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- css3实现六边形
实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
随机推荐
- java synchronized静态同步方法与非静态同步方法，同步语句块
摘自:http://topmanopensource.iteye.com/blog/1738178 进行多线程编程,同步控制是非常重要的,而同步控制就涉及到了锁. 对代码进行同步控制我们可以选择同步方 ...
- jquery 常用函数集锦
html() 方法的功能是设置或获取元素中显示的内容css() 方法的功能是设置或获取元素的某项样式属性 $("#61dh a").css('color','#123456'); ...
- Mybatis 学习-1
本次MyBatis基础实例教程主要讲述MyBatis在项目中的配置方法,实体对象的关系映射.关联关系,以及如何实现一个BaseDao的功能 实例数据库的表结构 CREATE TABLE `blog_u ...
- java多线程的常用方法（以及注意事项）
/* * 线程的常用方法 * 1.start(); * 2.run(); * 3.sleep(int millsecond); * 4.isAlive(); -->判断线程是否还在运行 * 5. ...
- 今天遇到一个问题，linq语句的写法，查询动态字段
public List<Location> getLocationList(int companyid, string searchValue, string searchField) ...
- Sumblime Text2安装Package Control两种方法+安装插件+注册码
刚开始不认识sumblime的时候,就直接在网上下载了一个最新版的sumblime text3,只是在配合使用go语言时,出现了一些不为自己知道的奇葩问题,于是果断把3卸载了,改成了sumblime ...
- 深入掌握include_once与require_once的区别
转:http://www.jb51.net/article/38587.htm http://www.360doc.com/content/12/1022/17/7851074_243107406. ...
- [转]Visual Studio 2010 单元测试目录
Visual Studio 2010 单元测试共分七个部分: 普通单元测试.顺序单元测试.压力测试,Generic测试.数据库测试.UI界面测试和Web性能测试. 这个系列的博客实例程序可以在下面的链 ...
- Oracle 中的 decode
含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...
- ANGULAR JS WATCH监听使用
ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...