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!
Disclaimer: There may be a viable solution using regular raster images and image tags.
One option is to use inline SVGs (this approach is much cleaner when using a component framework like Svelte, Vue, etc where an SVG can be in a component separate from the template where the grid is).
Why? Inline SVG has the unique ability to have part of the image outside the bounds of the viewBox and using overflow: visible in CSS it will show up. You've already done the specific math for this image size and with SVG all of your image sizes can be the same, the isometric footprint can be identical across a variety of tiles and the images can "stick out" of their frames.
The CSS for the SVG can be nearly identical to what you have for the img tag in your Codepen examples (with the addition of overflow: visible).
You will need to add preserveAspectRatio="none" to every single SVG file:
<svg preserveAspectRatio="none" ...><!-- path data here --></svg>
Here's an example of multiple styles of tiles that all have identical footprints and viewBox sizes, some with content overflowing the top of the frame https://codepen.io/JHeth/pen/zYPvmPQ