程序员经验分享-hwhale

使用 CSS 构建 3D 金字塔

2024-02-02

这里有一个jsbin http://jsbin.com/suvajux/1/edit?html,css,output到目前为止，我所拥有的和下面是我正在尝试构建的图像：

这是 html，到目前为止我只添加了金字塔的 2 条边：

<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。

我需要一些有关数学以及如何定位元素的帮助。

我希望三角形的所有 4 条边都在顶点相交，并将三角形的四个底边放置在矩形 div 上。

我正在努力解决如何使不同三角形的点在顶点相遇的问题。

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

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


首先，了解 CSS 变换的几个基本点

  • 变换的顺序很重要
  • 视角会随着容器的大小而改变（#pyramid for you）
  • 变换的原点不会被继承，如果没有设置transform-origin，默认情况下它是对象的中心（包括边框等，afaict）
  • x 是水平轴，y 是垂直轴，z 是与屏幕表面正交的轴（当您没有视角时）

然后在金字塔上：

让我们看一下底角（我们称之为 α）。根据角度 α 表达三角形大小，您可以得到：

  • 宽度=基础
  • 边心（三角形的高）=（1/2 底边）/ cos(α)
  • 金字塔高度 = (1/2 底面) * tan(α)

在您尝试的金字塔中，Base = 200px，因此 1/2 Base = 100px，Apothem = 三角形高度 = 100px。这迫使 cos(α) = 1 因此 α = 0°——你将得到一个平坦的金字塔。

如果你想要 α = 60°，你想要 apothem = 200px，你会得到金字塔高度 = 173.2
如果你想要 α = 45°，你想要 apothem = 141px，你会得到金字塔高度 = 100
etc.

现在您知道参数的主要秘密是在每一步中推理轴指向的位置以及要在对象的哪个点应用变换。纸和笔，或者反复试验，只要有效，就是好的。

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

  • 将 css-transform 放在所有三角形底部的中间
  • 围绕 Y 轴旋转 90° 的倍数，以将每个三角形定向到金字塔的不同面（分别为 0、90、180、270）
  • 沿 Z 平移 1/2 Base 以获得正确的位置
  • 沿 X 轴旋转所需角度​​ (90°-α)，使它们在顶点处相交。

由于第一次旋转，最后两个相同的步骤将在所有三角形上执行您想要的操作。

对于基础，更简单，你可以保留默认的 css-transform

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

下面是 α = 45° 的情况，如果您不想剧透，请不要打开该片段。

#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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Math

geometry

使用 CSS 构建 3D 金字塔 的相关文章

  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl

  • CSS3变换：悬停时翻译，带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a

  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div？

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu

  • 在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用

  • 在按钮之间添加空间？

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助

  • 矩阵乘法 - 视图/投影、世界/投影等

    在 HLSL 中有很多矩阵乘法 虽然我了解如何以及在何处使用它们 但我不确定它们是如何导出的或它们的实际目标是什么 所以我想知道是否有在线资源可以解释这一点 我特别好奇将世界矩阵乘以视图矩阵以及世界 视图矩阵乘以投影矩阵背后的目的是什么 您

  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name

  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms

  • 如何在文本区域中使用除“文本插入符号”之外的透明字体？

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动

  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载！仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr

  • 从 1 到 20 亿，像 (23,29) 这样相差 6 的连续素数对的数量

    如何在考虑时间复杂度的情况下从 1 到 20 亿 使用任何编程语言且不使用任何外部库 找到像 23 29 这样相差 6 的连续素数对的数量 尝试过埃拉托色尼筛 但获得连续素数是一个挑战 使用了生成器 但时间复杂度非常高 代码是 def ge

  • C++ Exp 与 Log：哪个更快？

    我有一个 C 应用程序 需要比较两个值并决定哪个值更大 唯一的复杂之处是一个数字在对数空间中表示 而另一个则不是 例如 double log num 1 log 1 23 double num 2 1 24 如果我想比较num 1 and

  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div

  • 如何为背景图像添加边距？

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎

  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如

  • 如果数字小于 10，则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t

  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

随机推荐

热门标签