用CSS构建3D金字塔 [英] constructing a 3d pyramid with css

问题描述

以下是我到目前为止所拥有的 jsbin 下面是我要构造的图像:

Here is a jsbin of what I have so far and below is an image of what I am trying to construct:

这是html，到目前为止，我仅添加了金字塔的2面:

Here is the html, I have only 2 sides of the pyramid added so far:

<div class="pyramid-container">
  <div id="pyramid">
    <div class="base"></div>
    <div></div>
    <div></div>
  </div>  
</div>

这是CSS:

.pyramid-container {
  perspective: 800px;
}

#pyramid {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 116px 200px 116px;
   padding-left: 100px;
  margin-top: 50px
}


#pyramid div:not(.base) {
  position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;  /* left arrow slant */
    border-right: 100px solid transparent; /* right arrow slant */
    border-bottom: 100px solid; /* bottom, add background color here */
    font-size: 12px;
    line-height: 0;
  opacity: .5;
}

.base {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  transform: rotateX(80deg) translate3d(0px, 10px, 0px);
}

#pyramid div:nth-child(2) {
  border-bottom-color: blue;//#e04545;
  transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 100px);
}

#pyramid div:nth-child(3) {
  border-bottom-color: yellow;//#ccaf5a;
  transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 25px, 0px);
}

我正在使用css3创建1个基本矩形div和4个三角形div.

I am using css3 to create 1 base rectangular div and 4 triangular divs.

我希望所涉及的数学以及如何定位元素方面有帮助.

I would like some help with the maths involved as well as how to position the elements.

我希望所有四个三角形边在一个顶点相交，并且将四个三角形底边放在矩形div上.

I would like all 4 of the triangle sides to meet at an apex and have the four triangle bottom sides positioned on the rectangular div.

我正在努力寻找如何获得不同三角形的顶点相交的顶点.

I am struggling with how to get the points of the different triangles to meet in at an apex.

任何人都可以帮助我解决数学问题或使用什么逻辑来实现这一目标.

Can anyone help me out with the maths or what logic to use to achieve this.

我不是在寻找代码，而是更多我应该使用的逻辑或数学.

I'm not looking for code but more the logic or maths I should use.

推荐答案

因此，首先，介绍CSS转换的几个基本要点

So first, a couple fundamental points on CSS transforms

• 转换顺序很重要
• 视角将随着容器的大小而变化(适合您的#pyramid)
• 不继承转换的原点，并且如果未使用transform-origin进行设置，则默认情况下它是对象的中心(包括bodders等，afaict)
• x是水平轴，y是垂直轴，z是与屏幕表面正交的轴(当您没有透视时)

• the order of transforms is important
• the perspective will change with the size of container (#pyramid for you)
• the origin of the transform is not inherited, and if not set with transform-origin, it is by default the center of the object (borders et al. included, afaict)
• x is the horizontal axis, y the vertical one and z the one orthogonal to the screen's surface (when you don't have perspective)

然后在金字塔上

让我们看看底角(我们称它为α).根据角度α表示三角形的大小，您将得到:

Let us look at the Base angle (let's call it α). Expressing the triangle sizes based on the angle α, you get:

• width = Base
• 倾斜度(三角形的高度)=(1/2基)/cos(α)
• 金字塔的高度=(1/2基)* tan(α)

在您尝试的金字塔中，底边= 200像素，因此1/2底边= 100像素，而Apothem =三角形高度= 100像素.这会导致cos(α)= 1，因此α= 0°-您将拥有一个平坦的金字塔.

In the pyramid of your attempt, Base = 200px thus 1/2 Base = 100px and Apothem = triangle height = 100px. This forces cos(α) = 1 thus α = 0° -- you will have a flat pyramid.

如果您想将α= 60°，则需要apothem = 200px，那么您将得到金字塔高度= 173.2
如果您想要α= 45°，则需要apothem = 141px，那么您将得到金字塔高度= 100
等

If you want α = 60°, you want apothem = 200px, and you'll get pyramid height = 173.2
If you want α = 45°, you want apothem = 141px, and you'll get pyramid height = 100
etc.

现在您知道参数的主要秘诀是在每一步中推理，关于轴的指向以及要应用变换的对象的点.铅笔或审判&错误，一切正常都很好.

The main secret now you know the parameters, is to reason at each step, about where the axis are pointed, and at which point of the object you are applying the transforms. Paper & pencil or trial & error, whatever works is good.

所以这是放置三角形的方法:

So here's how I would do to place triangles:

• 将css变换放在所有三角形底边的中间
• 围绕Y轴旋转90°的倍数，以使每个三角形面向金字塔的不同面(分别为0、90、180、270)
• 沿Z平移1/2个基数以获取正确的位置
• 沿X轴旋转所需的角度(90°-α)，以使它们在顶点相遇.

多亏了第一个旋转，两个相同的最后一步将在所有三角形上完成您想做的事情.

Thanks to the first rotation, the two identical last steps will do what you want on all triangles.

对于基础，它更容易，您可以保留默认的css-transform

For the base, it's easier, you can keep the default css-transform

• 沿X旋转90°(将使其在垂直于屏幕的平面上平坦")
• 将其沿Z方向移动(Apothem-1/2 Base)以与三角形的底边对齐

下面是α= 45°时的样子，如果您不希望破坏画面，请不要打开片段.

Below is what it would look like for α = 45°, feel free to not open the snippet if you don't want spoilers.

#pyramid {
  perspective: 400px;
  padding: 50px 0 0 200px;
}
#pyramid div:not(.base) {
  position: absolute;
  border-left: 100px solid transparent;   /* 1/2 Base */
  border-right: 100px solid transparent;   /* 1/2 Base */
  border-bottom: 141px solid;  /* Apothem */
  transform-origin: 100px 141px 0; /* bottom of trangle (1/2 Base, Apothem) */
  opacity: .5;
}
.base {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #2f2f2f;
  /* transform by default from middle (100px, 100px)
     move by Apothem - 1/2 Base = 41px */
  transform: rotateX(90deg) translate3d(0px, 0px, -41px);
  opacity: .5;
}
#pyramid div:nth-child(2) {
  border-bottom-color: #e04545;
  transform: rotateY(0deg) translate3d(0px, 0px, 100px) rotateX(45deg);
}
#pyramid div:nth-child(3) {
  border-bottom-color: #ccaf5a;
  transform: rotateY(90deg) translate3d(0px, 0px, 100px) rotateX(45deg);
}
#pyramid div:nth-child(4) {
  transform: rotateY(180deg) translate3d(0px, 0px, 100px) rotateX(45deg);
}
#pyramid div:nth-child(5) {
  border-bottom-color: #4ccfc7;
  transform: rotateY(270deg) translate3d(0px, 0px, 100px) rotateX(45deg);
}

<!doctype html>
<html>
<head><title>Pyramid</title></head>
<body>
<div class="pyramid-container">
  <div id="pyramid">
    <div class="base"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>  
  </div>
</body>
</html>

这篇关于用CSS构建3D金字塔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！