Starting at the top in isometric grids, like this, can be quite convenient: https://i.sstatic.net/YFh0SRmx.jpg
The code below is used to create a "3d" isometric box:
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>While the current setup works, is there a way to tweak it so that increasing the --width, --length, and --height CSS variables would expand the box in the opposite directions?
In other words, can we make --width extrude towards you as it grows, instead of away from you as it currently does?
Similarly, increasing --height should cause the box to grow upwards instead of downwards.
Lastly, increasing --length should make the box extend towards the "camera", not away from it as it does now.