# CSS 3D cuboid gauge

**URL:** <https://forum.inductiveautomation.com/t/css-3d-cuboid-gauge/68522>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 11, 2023, 11:53pm UTC](https://forum.inductiveautomation.com/t/css-3d-cuboid-gauge/68522 "2023-01-11T23:53:08Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 16, 2023, 11:40am UTC](https://forum.inductiveautomation.com/t/css-3d-cuboid-gauge/68522/12 "2023-01-16T11:40:29Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f46f9ece8683dd636af934a392c91e2fe12f5169.png)  
this is not how to inject css^^

i guess you can just put it here too if you dont want any sheets  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/593d4db30338b070775d7a311232522f190fb776.png)

to make it scaleable, look at my example, it should scale (though it does not respect ratio so you have to be sure its a square.

edit: i found a fix for aspect ratio, well it works in the browser atleast, it doesnt work in the designer  
`.psc-fixMarkdownElementHeight > div{height:auto; width:100%; aspect-ratio: 1 / 1;}`

Here you go!  
You'll have to take an other look at the labels tho  
[cube.zip](https://forum.inductiveautomation.com/uploads/short-url/weL6jaj82C8GVOKcBc8DouMJlka.zip) (5.5 KB)

though you might have to put `.psc-fixMarkdownElementHeight > div{height:100%; width:auto; aspect-ratio: 1 / 1;}`  
You could do that with a media query maybe, idk you'll have to see what works for you.  
or container queries if you have a decently updted browser i'll take alook at that tmw

---

_[View the full topic](https://forum.inductiveautomation.com/t/css-3d-cuboid-gauge/68522)._