css - 3D css - 在伪内容前后翻译或旋转 div

Question

这是一个jsbin到目前为止我所拥有的。

我想创建一个由 2 个六边形和一些构成主体的 div 组成的 3d 六 Angular 棱柱:

我的六边形由以下标记组成:

<div class="hexagon-wrapper">
  <div class="hexagon"></div>
</div>

CSS 使用伪 :before 和 :after 选择器创建额外的内容，旋转 60 度以形成六边形的形状:

.hexagon-wrapper {
  text-align: center;
  position: relative;
  width: 200px;
  height: 200px; 
}

.hexagon {
  height: 100%;
  width: 57.735%;
  display: inline-block; 
}

.hexagon:before {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotate(60deg);
  transform-origin: 25% 25%; 
}

.hexagon:after {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotate(-60deg);
  transform-origin: 25% 75%; 
}

问题是，当我尝试翻译其中一个六边形时:

.hexagon-wrapper:first-child .hexagon {
  background-color: #D93;
  transform: translateZ(100px);
}

如您所见，六边形变形了 here .

如何平移或旋转六边形。

Answer 1

当您将 translateZ(X) 应用于父级时，它会弄乱子级中 width 的 inherit 值。

解决方案是使用 width:100% 而不是 inherit 但是没有 translateZ(X) 的会搞砸。所以解决方案是在其上使用 translateZ(0)。

Demo

.hexagon:before {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: inherit;
  height: inherit;
  width: 100%;
  content: '';
  transform: rotate(60deg);
  transform-origin: 25% 25%; 
}

.hexagon:after {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: inherit;
  height: inherit;
  width: 100%;
  content: '';
  transform: rotate(-60deg);
  transform-origin: 25% 75%; 
}

.hexagon-wrapper:first-child .hexagon {
  background-color: #D93;
  transform: translateZ(100px);
}


.hexagon-wrapper:nth-child(2) .hexagon {
  background-color: #6C6; 
  transform: translateZ(0);
}