Currently, I have a project setup in Code Sandbox:
https://codesandbox.io/s/zno5rk648p?module=%2Fsrc%2Fcomponents%2FCube.vue
A snapshot is provided below (please note that the appearance of cubes may vary if you change the viewport size):
https://i.sstatic.net/choNg.png
Purpose:
The objective is to arrange cubes next to each other or on top of each other, maintaining stacking as if filling up the back of a truck: Begin at the rear of the truck, fill the first layer with boxes, then stack on top until reaching the ceiling; continue stacking in front of those boxes until the truck is fully loaded.
Additionally, when scaling the screen, the positions of the cubes should still appear adjacent to one another (unlike the current example).
We can utilize Vue or JavaScript for calculations beyond CSS capabilities, but the emphasis is to utilize CSS extensively.
Data Overview:
The markup structure is as follows:
<div class="container">
<div class="cubes-container">
<!-- for each cube --->
<div class="cube-wrap" >
<div class="cube depth cube-isometric">
<div class="front-pane">cube 1</div>
<div class="back-pane">back 1</div>
<div class="top-pane">top 1</div>
<div class="bottom-pane">bottom 1</div>
<div class="left-pane">left 1</div>
<div class="right-pane">right 1</div>
</div>
</div>
</div>
</div>
Positioning the cube on the right side of the first cube was not ideal, as it only works at specific resolutions:
.cube-wrap:nth-child(2) .cube {
transform: translate3d(142.5px, 50px, 125px) rotateX(-30deg) rotateY(-45deg);
transform-style: preserve-3d;
}
The controls on the left were also suboptimal. They modified the left and top values of .cube-wrap. By inputting numbers, you can observe the movement of cubes. Moreover, adding an extra cube reveals how the third one aligns with the "origin." These controls were initially intended for positioning cube testing purposes.
An attempt was made by setting the perspective on the container to view all cubes from a distinct vantage point:
.container {
position: absolute;
left: 240px;
top: 0;
bottom: 0;
right: 0;
background: grey;
perspective: 1000px;
perspective-origin: 50% 100px;
}
The CSS styling for the cube (omitting additional browser-specific extensions for brevity) was adopted from https://davidwalsh.name/css-cube
.cube-isometric {
transform: rotateX(-30deg) rotateY(-45deg);
transform-origin: 50% 50% 0;
}
/*************** STANDARD CUBE ***************/
.cube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation: cube-spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(38, 93, 79, 0.87);
box-shadow: inset 0 0 30px #c7ffb6;
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgb(255, 255, 255);
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.back-pane {
transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.depth div.left-pane {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.depth div.top-pane {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.depth div.bottom-pane {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.depth div.front-pane {
transform: translateZ(100px);
}
I'm seeking guidance on correcting the perspective to ensure proper behavior. The challenge lies in understanding the exact placement within 2D space to achieve the desired 3D illusion, along with identifying the appropriate rotation and perspective combination for generating this effect.