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程序设计》实验五实验报告
实验五 java网络编程实验内容 XP基础 XP核心实践相关工具实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2. ...
tableviewcell边距和设置值不符
解决方法: 将Table View Cell的Layout Margins由Default改为Explicit,然后修改上下左右的边距.
ERP开发分享 1 数据库表设计
这是我的ERP设计经验分享系列,今天讲的是数据库的表设计(1),主要阐述: 1.单字段的主键:2.使用int32作为主键类型:3.使用版本字段处理乐观锁定:4.生效字段标明是否允许“被使用”:5.锁定 ...
知名黑客组织Anonymous（匿名者）的装备库
原文出处: infosecinstitute 译文出处:freebuf 欢迎分享原创到伯乐头条本文关注的是世界著名的黑客组织Anonymous(匿名者).“我将描述他们的攻击方法和方式的计划 ...
PHP的那些坑
1.urlencode urlencode编码的对象必须是utf-8编码.如果是其它格式的编码就会出现乱码. 2.array_merge 一般来说,array_merge就是把两个或两个以上的数组组合 ...
C#常用的加密算法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一: //须添加对System.Web的引用 ...
php file_get_contents curl发送cookie，使用代理
$auth = base64_encode('LOGIN:PASSWORD');//LOGIN:PASSWORD 这里是你的账户名及密码 $aContext = array( 'http' => ...
二模（6） day1
第一题: 设 S(N)表示 N 的各位数字之和,如 S(484)=4+8+4=16,S(22)=2+2=4.如果一个正整数 x满足 S(x*x)=S(x)*S(x),我们称 x 为 Rabbit Nu ...
关于java.lang.reflect.InvocationTargetException
今天遇到java.lang.reflect.InvocationTargetException错误,卡了好一会儿,报错代码 try { Class<?> c= Class.forName( ...
青蛙跳台阶（Fibonacci数列）
问题一只青蛙一次可以跳上 1 级台阶,也可以跳上2 级.求该青蛙跳上一个n 级的台阶总共有多少种跳法. 思路当n=1时,只有一种跳法,及f(1)=1,当n=2时,有两种跳法,及f(2)=2,当n= ...

css3制作六边形图片

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

随机推荐

热门专题