Question

所以在这里我试图了解六边形是如何工作的。我目前保存了一个以下的codepen：

#categories li{
  position:relative;
  list-style-type:none;
  width:27.8em; 
  padding-bottom: 32.1em;
  float:left;
  overflow:hidden;
  visibility:hidden;

  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2){
  margin:0 1em;
}
#categories li:nth-child(6n+4){
  margin-left:0.5em;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -6.9em;
  margin-bottom: -6.9em;

  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li *{
  position:absolute;
  visibility:visible;
}
#categories li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;

  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);

    -webkit-backface-visibility:hidden;

}

正如你所看到的，我不明白定位背后的潜在魔力。虽然我的em值是相同的但它没有成功。与原始的码本相反，六边形被移位。

是什么原因？

好的几乎到了那里：

http://codepen.io/anon/pen/QweBra

Answer 1

你的宽度太宽了。

#categories{
  overflow:hidden;
  width:80%;font-size:0.4em;
  margin:0 auto;
}

更改为：

#categories{
  overflow:hidden;
  width:50%;font-size:0.4em;
  margin:0 auto;
}

您也可以将所有内容放入容器中，这样它就不会溢出。

六角形图案与ems无法正常工作？

1 个答案: