Question

我正在尝试使用CSS创建3面金字塔。我不确定这是否可能！

我可以像下面的那样创建4面法线金字塔，但是我被3面卡住了，我不知道该怎么做。

这是我到目前为止所拥有的：

@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0); }
	to { -webkit-transform: rotateY(360deg); }
}

.pyramid-gyro {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -100px;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% 100px;
}
.pyramid-axis {
	position: relative;
	width: 200px;
	-webkit-transform-style: preserve-3d;
  -webkit-animation: spin 16s infinite linear;
}

.pyramid-wall {
	position: absolute;
  border: 100px solid transparent;
}

.front {
  bottom: -20px;
  border-bottom: 200px solid red;
	-webkit-transform: translateZ(25px) rotateX(30deg);
}
.back {
  bottom: -20px;
  border-bottom: 200px solid blue;
	-webkit-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
}
.left {
  bottom: -20px;
  left: 75px;
  border-bottom: 200px solid green;
	-webkit-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
	-webkit-transform-origin: center left;
}
.right {
  bottom: -40px;
  right: 150px;
  border-bottom: 200px solid orange;
  -webkit-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
	-webkit-transform-origin: top right;
}
.bottom {
  width: 200px;
  height: 200px;
  background: #eec26f;
  -webkit-transform: rotateX(90deg) translateY(100px);
	-webkit-transform-origin: bottom center;
}
.shadow {
  position: absolute;
  top: 250px;
  width: 0;
  height: 0;
  box-shadow: 0 0 50px 100px rgba(0,0,0,0.5);
  -webkit-transform: rotateX(90deg) translateX(100px);
}

<div class="pyramid-gyro">
  <div class="pyramid-axis">
    
    <div class="pyramid-wall front"></div>
    <div class="pyramid-wall back"></div>
    <div class="pyramid-wall left"></div>
    <div class="pyramid-wall right"></div>
    
    <div class="bottom"></div>
    <div class="shadow"></div>
  </div>
</div>

有人可以在这个问题上提供建议或向我指出正确的方向吗？

先谢谢了。

Answer 1

首先，您需要创建基础which is a triangle：

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,red 50%) left,
     linear-gradient(to bottom left, transparent 49%,red 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:10px;
}

<div class="pyramide">

</div>

然后，您可以创建相同内容并使用一些旋转将其正确放置：

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:10px;
  position:relative;
}
.pyramide:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}

<div class="pyramide"></div>

现在让我们旋转所有内容并添加3D效果，以便我们看到它的外观：

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:50px;
  position:relative;
  transform-style: preserve-3d;
  transform: rotateX(77deg) rotateZ(67deg);
}
.pyramide:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}

<div class="pyramide"></div>

实际上我们有基础和一面，我们只需要做几乎相同的事情就可以拥有另一面

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:50px;
  position:relative;
  transform-style: preserve-3d;
  animation:change 5s linear alternate infinite;
  display:inline-block;
}
.pyramide:before,
.pyramide:after,
.pyramide span{
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}
.pyramide:after {
  filter:hue-rotate(90deg); 
  transform-origin: bottom right;
  transform: rotateZ(60deg) rotateX(-110deg);
}
.pyramide span {
  filter:hue-rotate(200deg);
  transform-origin: bottom left;
  transform: rotateZ(-60deg) rotateX(-110deg);
}

@keyframes change {
  from {transform: rotateX(77deg) rotateZ(67deg);}
  to { transform: rotateX(-160deg) rotateZ(0deg);}
}

<div class="pyramide"><span></span></div>

<div class="pyramide" style="--w:200px;"><span></span></div>

3面金字塔使用CSS？

1 个答案: