html – 基于三维六边形网格CSS不显示所需

概述这样做的目的是使用CSS制作动态六边形网格,这样当一个具有特定类的新div(例如’hexes’)被添加到视图中时,网格将自动以圆形或矩形方式重新组织这些六边形. 到目前为止还没有完成任何事情,我所拥有的是一个有很多十六进制的网格,有一些动画,它们按4个十六进制框的列排序,我们可以在列中添加行,或者我们可以添加列行,但他们没有自我排序的响应. 这是上面提到的一个片段 body { backgroun 这样做的目的是使用CSS制作动态六边形网格,这样当一个具有特定类的新div(例如’hexes’)被添加到视图中时,网格将自动以圆形或矩形方式重新组织这些六边形.

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

这是上面提到的一个片段

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.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,#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; }

<body>  <h1  align="center">3D Hexagon GrID Layout Demo</h1><div >  <div >    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div > <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> <a >      <div >        <div ></div>      </div>      <span > <strong>CSSScript</strong> <small>i'm a hexagon</small> </span> </a> </div>    <div ></div>  </div></div></body>

现在,如果我想要一半的格子,我将从类’列’中删除七个div …但是格子不会扩展也不会居中.

Here’s an attempt使它们更大并将它们显示在中心,基本上这里所做的是使正方形更大,调整一些左右值,没有什么可靠…

有人告诉我使用@media查询,但我没有那么多地使用它们……我们需要的是使网格具有目的地,并且也是动态的,目的是使用ng-repeat使其与AngularJs一起使用,这样我们就不会知道选项的数量,它会命令它们让它们看起来很好看.还想知道如何做一些其他的东西,比如在十六进制的中间插入一个图像,在十六进制的名称上显示一个图像,并可能用动画显示一些信息……

解决方法 唯一可用的解决方案确实是使用媒体查询.这个概念是你知道六边形的宽度,你使用：nth-​​child()选择器来推送每一行而不是将六边形包裹在行中,然后让它们成为内联块,然后用媒体设置所有断点查询基于您的六边形宽度,仅在视口宽度更改时更改内部的值：n​​th-​​child().

例：

<span ></span><span ></span><span ></span><span ></span><span ></span><span ></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;    }  }}

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

这是小提琴：https://jsfiddle.net/q2my8vcn/(已经调整了一些,但仍然不完美,但你可以在行动中看到基本的想法.)

总结

以上是内存溢出为你收集整理的html – 基于三维六边形网格CSS不显示所需全部内容，希望文章能够帮你解决html – 基于三维六边形网格CSS不显示所需所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。