I have been trying to build this Isometric UI by using a CSS grid tilted and skewed to create the isometric illusion: https://codepen.io/melvinidema/pen/wvPKxEb
Than, I would like to add a sprite onto the tile. To create, for example, a house on that spot. However, the problem is that the object will also be skewed: https://codepen.io/melvinidema/pen/PoOPByV
So far I tried to solve this problem by undoing the rotateZ(). But this results in a still weirdly looking image. So than I have to position the image absolutely as well as set the height, top and left manually. After that I get this: https://codepen.io/melvinidema/pen/BamoPve
It’s what I want. But it’s far from ideal. Because as soon as I try to use a different house I have to redo all the trial & error to get it correctly positioned and good looking as well. So this is when I try to add an image with different dimensions than the predecessor: https://codepen.io/melvinidema/pen/RwjWBOq
My question is, how do we solve this problem? So that whatever image I use, it’ll just be correct. Without manually setting the height, top and left properties all the time?
Someone suggested rendering the images outside of the grid and than just position them correctly. But how do I go about this? How do I calculate which position the image has to be?
Thanks in advance!