基于3D六边形网格CSS不显示所需

Question

这样做的目的是使用CSS创建一个动态六边形网格，这样当一个具有特定类的新div（例如，＆＃39; hexes＆＃39;）被添加到视图中时，网格将自动重新组织hexes以圆形或矩形的方式。

到目前为止还没有完成任何事情，我所拥有的是一个有很多十六进制的网格，有一些动画，它们按4个十六进制框的列排序，我们可以在列中添加行，或者我们可以添加包含行的列，但它们不是自我排序的响应。

这是上述

的片段

＆＃13;

＆＃13;

body { background-color: #171d25; }

.container {
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: 500px;
  -webkit-perspective: 700px;
  perspective: 700px;
  z-index: 10;
  overflow: hidden;
}

.container .honeycomb {
  display: block;
  position: absolute;
  margin-left: -465px;
  padding-left: 18px;
  left: 50%;
  text-align: center;
  height: 450px;
  width: 930px;
  -ms-transform: rotateX(45deg) rotateY(0deg);
  -webkit-transform: rotateX(45deg) rotateY(0deg);
  transform: rotateX(45deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -ms-transform-origin: center 65%;
  -webkit-transform-origin: center 65%;
  transform-origin: center 65%;
  z-index: 5;
}

.container .honeycomb .column {
  display: block;
  float: left;
  width: 62px;
}

.container .honeycomb .column:nth-child(odd) { margin-top: 36px; }

.container .honeycomb .hex {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  height: 72px;
  width: 62px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

.container .honeycomb .hex:hover {
  opacity: 1;
  -ms-transform: translateZ(20px);
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

.container .honeycomb .hex:hover .content {
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
  -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
  transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
}

.container .honeycomb .hex .wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.container .honeycomb .hex .wrapper .color-1 { background: #ffbc06; }

.container .honeycomb .hex .wrapper .color-1:before { border-right-color: #ffbc06; }

.container .honeycomb .hex .wrapper .color-1:after { border-left-color: #ffbc06; }

.container .honeycomb .hex .content {
  display: block;
  position: absolute;
  top: 0;
  left: -80px;
  text-align: center;
  width: 200px;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: all 0.3s ease-out 0.1s;
  -o-transition: all 0.3s ease-out 0.1s;
  -webkit-transition: all 0.3s ease-out;
  -webkit-transition-delay: 0.1s;
  -webkit-transition: all 0.3s ease-out 0.1s;
  transition: all 0.3s ease-out 0.1s;
  -ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}

.container .honeycomb .hex .content strong {
  display: block;
  font: 600 26px/1.1 verdana, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.8);
}

.container .honeycomb .hex .content small {
  display: block;
  font: 15px/1.1 verdana, sans-serif;
}

.container .honeycomb .shadows {
  display: block;
  position: absolute;
  top: -15%;
  left: -15%;
  height: 130%;
  width: 130%;
  background-image: -webkit-radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
  background-image: radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
  -ms-transform: translateZ(10px);
  -webkit-transform: translateZ(10px);
  transform: translateZ(10px);
  pointer-events: none;
}

.hexagon {
  display: block;
  position: absolute;
  width: 36px;
  height: 62px;
  background-color: #ffffff;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: relative;
  float: left;
  border-top: 31px solid transparent;
  border-bottom: 31px solid transparent;
}

.hexagon:before {
  border-right: 18px solid #ffffff;
  left: -18px;
}

.hexagon:after {
  border-left: 18px solid #ffffff;
  right: -18px;
}

.hidden { display: none; }

＆＃13;

<body>  
<h1 style="margin:150px auto 30px auto; color:#fff" align="center">3D Hexagon Grid Layout Demo</h1>
<div class="container">
  <div class="honeycomb">
    <div class="hexes-1 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-2 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-3 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-4 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-5 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-6 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-7 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-8 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-9 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-10 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-11 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-12 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-13 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-14 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="hexes-13 column"> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a class="hex">
      <div class="wrapper">
        <div class="hexagon color-1"></div>
      </div>
      <span class="content"> <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>
    <div class="shadows"></div>
  </div>
</div>
</body>

＆＃13;

＆＃13;

＆＃13;

现在，如果我想要一半的咒语，我就可以在课堂上排除七个div＆＃39; ......但是，这些咒语不会扩展，也不会中心化。

Here's an attempt要让它们更大并将它们显示为居中，基本上这里所做的就是使正方形更大，调整一些左右值，没有任何实体......

有人告诉我要使用@media查询，但是我还没有和他们一起工作......所需要的是使网格具有目标性，并且还有动态，目的是使其成为现实使用ng-repeat与AngularJS一起工作，这样我们就不会知道选项的数量，并且会命令它们使它们看起来很好。还想知道如何做一些其他的事情，比如在十六进制的中间插入一个图像，在十六进制的名称上显示一个图像，并可能用动画显示一些信息......

Answer 1

唯一可用的解决方案确实是使用媒体查询。这个概念是你知道六边形的宽度，你使用:nth-child()选择器来推动每一行而不是将六边形包裹在行中，然后只需要它们inline-block，然后使用:nth-child()设置所有断点基于六边形宽度的媒体查询，仅在视口宽度更改时更改<span class="hex"></span> <span class="hex"></span> <span class="hex"></span> <span class="hex"></span> <span class="hex"></span> <span class="hex"></span> <style> .hex{ width:100px; } @media(min-width: 200px) and (max-width: 299px){ .hex:nth-child(3n){ margin-left:50px; } } @media(min-width: 300px) and (max-width: 399px){ .hex:nth-child(5n+4){ margin-left:50px; } } @media(min-width: 400px) and (max-width: 499px){ .hex:nth-child(7n+5){ margin-left:50px; } } @media(min-width: 500px) and (max-width: 599px){ .hex:nth-child(9n+6){ margin-left:50px; } } </style> 内的值。

示例：

for(i = 2; i < .hex(length); i++){
  @media(min-width: i * .hex(width) ) and (max-width: (i * 2 * .hex(width)) - 1){
    .hex:nth-child(((2*i)-1)n+(i+1)){
      margin-left:.hex(width)/2;
    }
  }
}

形式是：

<ul id="var_language_short">
    <li id="languages_more"><label class="form_present_trigger">More</label></li>
</ul>
<div id="language_checkbox" class="popup_fullscreen">
    <div class="popup_fullscreen_close">close</div>
    <ul id="var_language_long">
    </ul>
</div>
<div class="form_present_row">
    <span class="form_present_title">
        <label class="form_present_title_label" for="var_prixPlat">Prix moyen 
                d'un plat<span class="req" title="Required">*</span></label>
    </span>
    <div class="form_present_content">
        <span class="form_present_update">
            <input class="form_present_input var_prixPlat" type="text" id="var_prixPlat" />
        </span>
    </div>
</div>

这适用于水平（尖）六角网格，但这个想法可以很容易地适应垂直（平面）六边形网格改变上面的公式。

这是小提琴：https://jsfiddle.net/q2my8vcn/ （已经调整了一些，但仍然不完美，但你可以很好地看到基本想法。）