Question

这是我目前所拥有的jsbin。

我想创建一个由六个六边形组成的三维六边形棱镜和一些构成身体的div：

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

<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);
}

六角形变形，如您所见[{3}}。

如何翻译或旋转六边形。

Answer 1

当您将translateZ(X)应用于父级时，它会混淆孩子中inherit的{{1}}值。

解决方案是使用width而不是width:100%，但是没有inherit的那个会陷入困境。因此，解决方案是在其上使用translateZ(X)。

Demo

translateZ(0)

Answer 2

3D旋转五边形代码

#stage { 
  margin: 75px auto 0 auto;
  max-width: 253px;
  position: relative;
}
.spinner .face {    
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    width: 280px;
    height: 135px;
    border: 1px solid rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 48px;
    margin: 0 auto;
    font-size: 14px;
    padding: 4px 0;
}

.spinner .face--first { 
    background: tomato;
    transform: rotateY( 0deg ) translateZ(100px);
}
.spinner .face--second { 
    background: orange;
    transform: rotateX(72deg) translateZ(100px); 
}
.spinner .face--third { 
    background: blue;
    transform: rotateX(144deg) translateZ(100px); 
}
.spinner .face--fourth { 
    /*background: lime;*/
    transform: rotateX(216deg) translateZ(100px); 
}
.spinner  .face--fifth {
    background: red;
    transform: rotateX(-72deg) translateZ(100px); 
}

.spinner {
 animation: spincube 8s infinite linear; 
  /*transform:rotateY(96deg);*/
  position: relative;
    transform-style: preserve-3d;
   
}

@-webkit-keyframes spincube {
    from {
				transform: rotateX(0deg) rotateY(0deg);
			}

			to {
				transform: rotateX(360deg) rotateY(360deg);
			}
}



#pentagon {
    width:380px;
    height:380px;
    z-index: 11111;
    overflow: hidden;
	
   
}
#pentagon .inner {
    width: inherit;
    height: inherit;
    overflow: hidden;
    -webkit-transform:scaleY(1.05146) skewX(-19deg) rotate(36deg) translateY(-36.33%) rotate(18deg) skewY(54deg) scaleX(0.58779);
    transform: scaleY(1.05146) skewX(-19deg) rotate(36deg) translateY(-36.33%) rotate(18deg) skewY(54deg) scaleX(0.58779);
}

#pentagon .inner:before {
    width: inherit;
    height: inherit;
    display: block;
    content: '';
    background:#333 url(surface_side_default.jpg) no-repeat right bottom;
	    background-size: 78% 62%;
    background-position: 22px 158px;
    -webkit-transform: scaleX(1.7013) skewY(-54deg) rotate(-18deg) translateY(-12.67%);
    transform:scaleX(1.7013) skewY(-54deg) rotate(-18deg) translateY(-12.67%);
}
.transide1{
	    position: absolute;
	 -webkit-transform:rotateX(-18deg) rotateY(-90deg) skewX(19deg) scaleY(0.95106) translateX(-80px) translateY(-34px) translateZ(-92px);
    transform:rotateX(-18deg) rotateY(-90deg) skewX(19deg) scaleY(0.95106) translateX(-80px) translateY(-34px) translateZ(-92px);
}

.transide2{
	 -webkit-transform:rotateX(-18deg) rotateY(-90deg) skewX(19deg) scaleY(0.95106) translateX(-80px) translateY(-34px) translateZ(190px);
    transform:rotateX(-18deg) rotateY(-90deg) skewX(19deg) scaleY(0.95106) translateX(-80px) translateY(-34px) translateZ(190px);
}

<div id="stage">
    <div class="spinner">
    	<div  id="pentagon" class=" transide1"><div class="inner"></div></div>
        <div class="face face--first"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div class="face face--first"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div class="face face--second"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div class="face face--third"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div class="face face--fourth"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div class="face face--fifth"><img src="surface_side_default.jpg" height="140" width="280" /></div>
        <div  id="pentagon" class=" transide2"><div class="inner"></div></div>
    </div>
</div>

3D css - 使用伪内容之前和之后翻译或旋转div

2 个答案:

Demo