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=" ...

随机推荐

SQL Server 文件路径
原文:SQL Server 文件路径系统数据库文件路径 master <drvie>:\program files\microsoft sql server\mssql10.<in ...
T-SQL性能调整——信息收集
原文:T-SQL性能调整--信息收集 IO信息(自服务器启动开始) --Database IO analysis WITH IOFORDATABASE AS ( SELECT DB_NAME(VFS. ...
Docker简明教程（转）
Docker自从诞生以来就一直备受追捧,学习Docker是一件很炫酷.很有意思的事情.我希望通过这篇文章能够让大家快速地入门Docker,并有一些学习成果来激发自己的学习兴趣.我也只是一个在Docke ...
hadoop工作平台梳理
文章 http://blog.csdn.net/lili72/article/details/41130743 lili72 数据平台: 一. hadoop平台:Hbase.hive,storm,s ...
具体解释首页被K后SEOer必做的三大排除方法！
近段时间.有非常多朋友向新辰抱怨说出大问题了,为神马site不到首页了,并且收录变成了0?唉,新辰不得不非常同情的告诉你:你的首页真的被K了!好了.作为一个职业SEOer.面对被K宛如已经看破红尘般没 ...
OpenGL缓冲区
OpenGL缓冲区颜色缓冲区 OpenGL时,先是在一个缓冲区中完毕渲染,然后再把渲染结果交换到屏幕上. 我们把这两个缓冲区称为前颜色缓冲区(屏幕)和后颜色缓冲区.在默认情况下,OpenGL命令是在 ...
JSP/Servlet线程安全
携带servlet开发时间.线程安全是非常重要的.否则会导致一些意想不到的结果. Servlet的生命周期是由Web负责集装箱,什么时候client第一个请求Servlet时间,容器负责初始化Serv ...
如何有效地记录 Java SQL 日志(转)
在常规项目的开发中可能最容易出问题的地方就在于对数据库的处理了,在大部分的环境下,我们对数据库的操作都是使用流行的框架,比如 Hibernate . MyBatis 等.由于各种原因,我们有时会想知道 ...
HDU 4292Food(网络流的最大流量）
职务地址:HDU 4292 水题. 因为每一个人仅仅能有1份,所以须要拆点限制流量.建图方法为,建一源点与汇点.将食物与源点相连,权值为食物额数量,将饮料与汇点相连,权值为饮料数量..然后将人进行拆点 ...
vimer
vimer 第1.0章.统一概念不管学什么技术,我都深信概念是最重要的.是影响整个学习轨迹,决定能在这个技术领域高度. 当然如果你现在的目的不是在学习而在于解决问题(很多人不愿意承认,或者没发现 ...

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

CSS3 实现六边形Div图片展示效果的更多相关文章

随机推荐

热门专题