He estado tratando de construir esta interfaz de usuario isométrica usando una cuadrícula CSS inclinada y sesgada para crear la ilusión isométrica: https://codepen.io/melvinidema/pen/wvPKxEb
Entonces, me gustaría agregar un sprite en el mosaico. Para crear, por ejemplo, una casa en ese lugar. Sin embargo, el problema es que el objeto también estará sesgado: https://codepen.io/melvinidema/pen/PoOPByV
Hasta ahora, traté de resolver este problema deshaciendo la función de rotateZ() . Pero esto da como resultado una imagen todavía extraña. Entonces, tengo que colocar la imagen de manera absoluta, así como configurar la altura, la parte superior y la izquierda manualmente. Después me sale esto: https://codepen.io/melvinidema/pen/BamoPve
Es lo que quiero. Pero está lejos de ser ideal. Porque tan pronto como trato de usar una casa diferente, tengo que rehacer todo el proceso de prueba y error para colocarla correctamente y que se vea bien también. Así que aquí es cuando trato de agregar una imagen con dimensiones diferentes a las del predecesor: https://codepen.io/melvinidema/pen/RwjWBOq
Mi pregunta es, ¿cómo solucionamos este problema? Para que cualquier imagen que use, sea correcta. ¿Sin configurar manualmente las propiedades de altura, arriba y a la izquierda todo el tiempo?
Alguien sugirió renderizar las imágenes fuera de la cuadrícula y luego colocarlas correctamente. Pero, ¿cómo hago esto? ¿Cómo calculo en qué posición debe estar la imagen?
¡Gracias por adelantado!
Descargo de responsabilidad: puede haber una solución viable utilizando imágenes rasterizadas regulares y etiquetas de imagen.
Una opción es usar SVG en línea (este enfoque es mucho más limpio cuando se usa un marco de componentes como Svelte, Vue, etc., donde un SVG puede estar en un componente separado de la plantilla donde está la cuadrícula).
¿Por qué? SVG en línea tiene la capacidad única de tener parte de la imagen fuera de los límites de viewBox y usar el desbordamiento: visible en CSS, se mostrará. Ya ha realizado los cálculos específicos para este tamaño de imagen y, con SVG, todos los tamaños de imagen pueden ser iguales, la huella isométrica puede ser idéntica en una variedad de mosaicos y las imágenes pueden "sobresalir" de sus marcos.
El CSS para el SVG puede ser casi idéntico al que tiene para la etiqueta img en sus ejemplos de Codepen (con la adición de desbordamiento: visible).
Deberá agregar preserveAspectRatio="none" a cada archivo SVG:
<svg preserveAspectRatio="none" ...><!-- path data here --></svg>Aquí hay un ejemplo de varios estilos de mosaicos que tienen huellas y tamaños de viewBox idénticos, algunos con contenido que se desborda en la parte superior del marco https://codepen.io/JHeth/pen/zYPvmPQ