I'm currently in the process of constructing an isometric grid made up of cubes using CSS, but I've encountered a problem with outlines.
Here's my desired outcome: cube design However, this is what I have managed to achieve so far:
html cube I've attempted various techniques such as incorporating translateZ and adjusting backface visibility, but without success.
This is how my CSS currently looks:
.cube {
transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;
div {
position: absolute;
transition: background-position ease 7s;
backface-visibility: hidden;
&:first-child {
transform-origin: center top;
width: 100%;
height:100%;
transform: rotateX(-90deg);
top: 100%;
}
&:nth-child(2) {
transform-origin: left center;
width: 100%;
height: 100%;
left: 100%;
transform: rotateY(90deg);
}
}
Any suggestions or insights would be greatly appreciated.