如何使用 HTML 和 CSS 正确生长等距矩形框？

问题描述 投票：0回答：1

等距网格从顶部开始很方便，如下所示：iso grid

我有以下代码来绘制“3d”等轴测框：

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.plane {
  position: relative;
  width: 600px;
  height: 600px;
}

.container {
  position: absolute;
  width: 0;
  height: 0;
}

.left {
  background-color: #3e8fe1;
  height: var(--width);
  width: var(--height);
  transform-origin: 0 0;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
}

.right {
  position: relative;
  background-color: #2870bd;
  height: var(--height);
  width: var(--length);
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
  bottom: var(--width);
}

.top {
  position: relative;
  background-color: #80bdfe;
  height: var(--length);
  width: var(--width);
  transform-origin: 0 0;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
  bottom: calc(var(--width) + var(--height));
}
<body>
  <div class="plane">
    <div class="container" style="--width: 50px; --length: 200px; --height: 100px; left: 150px; top: 150px;">
      <div class="left"></div>
      <div class="right"></div>
      <div class="top"></div>
    </div>
  </div>
</body>

这是可行的，但是有没有什么方法可以让增加 

--width
、
--length
和 
--height
CSS 变量将使盒子沿与当前增长方向相反的方向增长？

也就是说，

--width
当前正在从前到后生长，但应该从后到前生长（这样增加它会使其向您伸出而不是远离您）

同样，增加 

--height
应该让它变大，而不是变小。

最后，增加 

--length
应该使其朝向“相机”生长，而不是像目前那样远离它。

有什么好的方法吗？这将使排列事情变得更加容易。

html css matrix css-transforms isometric
1个回答
0
投票

body {
  background-color: #000;
  box-shadow: inset 0 0 1em #000;
}

#plane {
  width: 10em;
  height: 10em;
  margin: 0 auto;
  position: relative;
  top: 5em;
  transform: rotateX(45deg) rotateZ(45deg) translateZ(-1em);
  transform-style: preserve-3d;
}

#plane div {
  float: left;
  transform-origin: 97% 97%;
  position: relative;
}

.tall {
  background: #fff;
  transform: translateZ(var(--height));
  transform-style: preserve-3d;
  width: var(--width);
  height: var(--length);
}

.tall:before, .tall:after {
  content: "";
  background: #2e6b8f;
  position: absolute;
  transform-origin: 100% 100%;
}

.tall:before {
  transform: translateY(calc(var(--length) - 1em - var(--height) + 1em)) rotateX(90deg);
  box-shadow: inset 0em -.125em .25em rgba(0, 0, 0, .1);
  width: var(--width);
  height: var(--height);
}

.tall:after {
  transform: translateX(calc(var(--width) - 1em - var(--length) + 1em)) translateY(calc(var(--length) - 1em)) rotateX(90deg) rotateY(90deg) translateX(calc(var(--height) * -1 + 1em));
  box-shadow: inset -.125em 0em .25em rgba(0, 0, 0, .1);
  width: var(--length);
  height: var(--height);
}
<div id="plane">
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
  <div class="tall" style="--width: 1em; --length: 1em; --height: 1em"></div>
</div>

我在

transform
线中使用了平移，这使我能够创建反向运动并重新对齐立方体的面。我还注意到您在示例中使用了 3 个单独的 div，因此我用 before 和 after 伪元素替换了其中 2 个。我希望这有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.