原文: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代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>CSS3 实现六边形图片展示效果</title>
  6.     <style type="text/css">
  7.         body, div, img, ul, li
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 12px;
  15.             background-color: #DDD;
  16.             min-width: 1200px;
  17.         }
  18.         ul, ul li
  19.         {
  20.             list-style: none;
  21.         }
  22.         .clear
  23.         {
  24.             clear: both;
  25.         }
  26.         .box
  27.         {
  28.             position: relative;
  29.             width: 630px;
  30.             margin: 100px auto;
  31.         }
  32.         .lineF, .lineS
  33.         {
  34.             position: absolute;
  35.             visibility: hidden;
  36.         }
  37.         .lineS
  38.         {
  39.             top: 182px;
  40.             left: 105px;
  41.         }
  42.         .boxF, .boxS, .boxT, .overlay
  43.         {
  44.             width: 200px;
  45.             height: 250px;
  46.             overflow: hidden;
  47.         }
  48.         .boxF, .boxS
  49.         {
  50.             visibility: hidden;
  51.         }
  52.         .boxF
  53.         {
  54.             transform: rotate(120deg);
  55.             float: left;
  56.             margin-left: 10px;
  57.             -ms-transform: rotate(120deg);
  58.             -moz-transform: rotate(120deg);
  59.             -webkit-transform: rotate(120deg);
  60.         }
  61.         .boxS
  62.         {
  63.             transform: rotate(-60deg);
  64.             -ms-transform: rotate(-60deg);
  65.             -moz-transform: rotate(-60deg);
  66.             -webkit-transform: rotate(-60deg);
  67.         }
  68.         .boxT
  69.         {
  70.             transform: rotate(-60deg);
  71.             background: no-repeat 50% center;
  72.             background-size: 125% auto;
  73.             -ms-transform: rotate(-60deg);
  74.             -moz-transform: rotate(-60deg);
  75.             -webkit-transform: rotate(-60deg);
  76.             visibility: visible;
  77.         }
  78.         .overlay
  79.         {
  80.             transition: all 250ms ease-in-out 0s;
  81.             display: none;
  82.             position: relative;
  83.         }
  84.         .overlay:hover
  85.         {
  86.             background-color: rgba(0,0,0,0.6);
  87.         }
  88.         .boxT:hover .overlay
  89.         {
  90.             display: block;
  91.         }
  92.         .overlay a
  93.         {
  94.             display: inline-block;
  95.             position: absolute;
  96.             left: 50%;
  97.             top: 50%;
  98.             margin: -16px 0 0 -16px;
  99.             border-radius: 3px;
  100.             background-color: #d3b850;
  101.             text-align: center;
  102.             line-height: 32px;
  103.             width: 32px;
  104.             height: 32px;
  105.             text-decoration: none;
  106.             color: White;
  107.             font-size: 18px;
  108.             font-weight: bolder;
  109.         }
  110.     </style>
  111. </head>
  112. <body>
  113.     <div class="box">
  114.         <!--第一行(lineFirst)-->
  115.         <div class="lineF">
  116.             <div class="boxF">
  117.                 <div class="boxS">
  118.                     <div class="boxT" style="background-image: url(img/1.jpg);">
  119.                         <div class="overlay">
  120.                             <a href="#">+</a>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.             <div class="boxF">
  126.                 <div class="boxS">
  127.                     <div class="boxT" style="background-image: url(img/2.jpg);">
  128.                         <div class="overlay">
  129.                             <a href="#">+</a>
  130.                         </div>
  131.                     </div>
  132.                 </div>
  133.             </div>
  134.             <div class="boxF">
  135.                 <div class="boxS">
  136.                     <div class="boxT" style="background-image: url(img/3.jpg);">
  137.                         <div class="overlay">
  138.                             <a href="#">+</a>
  139.                         </div>
  140.                     </div>
  141.                 </div>
  142.             </div>
  143.  
  144.         </div>
  145.         <!--第二行(lineSecond)-->
  146.         <div class="lineS">
  147.             <div class="boxF">
  148.                 <div class="boxS">
  149.                     <div class="boxT" style="background-image: url(img/4.jpg);">
  150.                         <div class="overlay">
  151.                             <a href="#">+</a>
  152.                         </div>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.             <div class="boxF">
  157.                 <div class="boxS">
  158.                     <div class="boxT" style="background-image: url(img/5.jpg);">
  159.                         <div class="overlay">
  160.                             <a href="#">+</a>
  161.                         </div>
  162.                     </div>
  163.                 </div>
  164.             </div>
  165.         </div>
  166.     </div>
  167. </body>
  168. </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. 分析Cocos2d-x横版ACT手游源 1、登录

    我自己的游戏代码 因为 游戏源 盯着外面的 我们能够能够理解 /******************************************************************** ...

  2. （DDD）仓储的思考

    (DDD)仓储的思考 为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计 ...

  3. 【 D3.js 入门系列 --- 10.2 】 你可以拖动地图

    我的个人博客是:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 本节是结合9.2节 和10节 的内容制作的一个可力学导向的中国地图,用 ...

  4. Oracle数据表被drop后的恢复

    对于被drop的表和索引,都会存放在回收站中(所以对于生产的数据库必须设置好回收站功能) 由于本次生成环境在drop掉已有的表后,又一次创建了很多的表,全部直接还原的话会提示原有对象存在,表名反复.当 ...

  5. 创建线程的两种方式：继承Thread类和实现Runnable接口

    第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...

  6. .NET开发者必备的11款免费工具

    原文:.NET开发者必备的11款免费工具 如今,HTML5,jQuery,JavaScript等等这些热门技术,受到了开发者们的强烈追捧,有了这些开发工具也为开发者们减轻了许多负担.本文为开发者介绍了 ...

  7. hdu 4919 Exclusive or

    Exclusive or Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) T ...

  8. windows平台搭建lighttpd+php+sqlite

    (一)php 1. 下载及安装 http://www.appservnetwork.com/ 从上面的网址下载appserv-win32-2.5.10并安装,在安装的时候,仅仅选择安装php. 由于, ...

  9. UVA11080- Place the Guards(二分图染色)

    题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...

  10. js中frame的操作问题

    这里以图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. A  首先从 父(frameABC)------->子(frameA,frameB,frameC) ...