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 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

随机推荐

在Access中批量调用SQL语句
access的SQL视图一次只能执行一条SQL语句,那么在VBA中调用或许可以简便一些例如: Public Sub 批量()Dim strsql As String strsql = " ...
史上最用心的 iOS App 上架流程
题记麻痹起来嗨!看网上那么多的教程,依然在我心爱的爱屁屁在上架的时候遇到各种 J8 问题,最大的问题就是:Xcode 证书什么的,Provisioning Profile 什么的,Debug 什么的 ...
理解Servlet过滤器 (javax.servlet.Filter)
过滤器(Filter)的概念过滤器位于客户端和web应用程序之间,用于检查和修改两者之间流过的请求和响应. 在请求到达Servlet/JSP之前,过滤器截获请求. 在响应送给客户端之前,过滤器截获响 ...
[译]Quartz 框架教程（中文版）2.2.x 之第一课开始使用Quartz框架
第一课:开始使用Quartz框架在你使用调度器之前,需要借助一些具体的例子去理解(谁愿意只是猜啊?).你可以使用SchedulerFactory类来达到程序调度的目的.有一些Quartz框架的用户可 ...
什么是RAID
RAID 维基百科,自由的百科全书关于与「 RAID 」同名的其他主题,详见「 RAID (消歧义) 」. 独立硬盘冗余阵列 ( RAID , R edundant A rray of I ndep ...
Black 全面分析
Black 全面分析如果有Block语法不懂的,可以参考fuckingblocksyntax,里面对于Block 为了方便对比,下面的代码我假设是写在ViewController子类中的 1.第一部 ...
Operating System Concepts with java 项目: Shell Unix 和历史特点
线程间通信,fork(),waitpid(),signal,捕捉信号,用c执行shell命令,共享内存,mmap 实验要求: 1.简单shell: 通过c实现基本的命令行shell操作,实现两个函数, ...
tarjan求强联通分量模板
void tarjan(int u) { dfn[u]=low[u]=++dfs_clock; stack_push(u); for (int c=head[u];c;c=nxt[c]) { int ...
NOIP 2003解题报告
第一题(神经网络): 题目大意,给出一些点,每个点都有2个值,c和u,给出一些有向边,权值为w.入度为0的点的c已知,其它点的c未知,每个入度不为0的点node的c等于sum(c[k]*w[k][no ...
2.精通前端系列技术之seajs模块化使工作更简单（二）
drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...

css3制作六边形图片

css3制作六边形图片的更多相关文章

随机推荐

热门专题