这可以用 CSS HTML 和 JavaScript 在 B 上做 A ，在 C 上做 B ，在 A 上做 C 吗？答案

【问题标题】：Is this possible to do A on B , B on C , C on A with CSS HTML and JavaScript?这可以用 CSS HTML 和 JavaScript 在 B 上做 A ，在 C 上做 B ，在 A 上做 C 吗？
【发布时间】：2016-12-23 16:40:51
【问题描述】：

这可以用 CSS HTML 和 JavaScript 在 B 上做 A ，在 C 上做 B ，在 A 上做 C 吗？

像这样：

【问题讨论】：

不，您必须将其中至少一个拆分为两部分/层，其中一层位于堆栈下方，另一层（半层）位于上方。就像底部的 A，然后是 B，然后是 C，然后是 A 的副本，它被部分屏蔽，仅覆盖堆栈顶部的区域。
大声笑，你应该让你的问题更具建设性。那可能吗？ .....确实是的
但是根据图层的具体内容（仅颜色或背景图像），您也许可以使用 CSS 和伪元素 ( :after)
和@FlyingGambit 你应该仔细阅读问题
阿法克。不，因为虽然 CSS 具有某种 3D 能力，但我还是很喜欢。它们只是作为每层后处理步骤的“平面”转换。所以每个 DOM 节点在这个过程中都是单独看到的，而不是更大的 3D 空间的一部分。

标签： javascript html css canvas svg

【解决方案1】：

目前，只有 Chrome 在像素级别支持 transform-style: preserve-3d - 而不是在元素级别。由于它是在像素级别完成的，因此元素的某些部分可以呈现在另一个元素的前面，而一些则在后面。

body {
  transform-style: preserve-3d;
}

div {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: absolute;
  transform-style: preserve-3d;
}
.A {
  background-color: tomato;
  left: 50px;
  top: 0px;
  transform: rotateY(3deg);  /* this does the trick */
}

.B {
  background-color: lightgreen;
  left: 50px;
  top: 0px;
  transform: rotate(120deg);
  transform-origin: center bottom;
}

.C {
  background-color: lightblue;
  left: 50px;
  top: 0px;
  transform: rotate(-120deg);
  transform-origin: center bottom;
}

<div class="A">Some fancy text</div>
<div class="B">Some fancy text</div>
<div class="C">Some fancy text</div>

因此，目前，您只能使用技巧 - 基本上将其中一个元素渲染为 2 个不同的元素

【讨论】：