Rotate image in picture-entity card

Configuration Frontend
1

The Roborock integration provides image entities for maps that I’d like to display on my dashboard. Unfortunately the entities don’t apply any rotation changes to the maps in the Roborock app.

I’m trying to rotate them with transform: rotate(90deg) through card-mod in a picture-entity card, but after doing that it doesn’t respect the container as it was before the rotation. I tried applying height, width, and margin in card mod and was able to get it to look right, and then realized that it displayed completely different in the mobile app.

Does anyone know the best way to achieve this properly?

show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: image.roborock_s7_maxv_main_floor
card_mod:
  style: |
    ha-card {
      transform: rotate(90deg);
      height: 500px;
      width: 280px;
      margin-left: 75px;
      margin-right: 16px;
      margin-top: -75px;
      margin-bottom: -70px;
      transition: none !important;
    }
2

Try to use transform: translate(x%, y%) instead of moving pictures with margin property. It moves picture horiziontaly/vertically in relation to its size, so in theory should be dependent only on picture size, not the screen size. Be avare, that transformation order matters; I’d first move center using translate then only rotate using rotate - gives more ‘natura’ result!

3

Thanks for the help! That did seem to help scale things properly between both desktop and mobile. The only issue I’m still facing is now there’s a large margin below the image.

show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: image.roborock_s7_maxv_main_floor
card_mod:
  style: |
    ha-card {
      transform: scale(65%, 60%) translate(0%, -52%) rotate(90deg) !important;
      transition: none !important;
    }

image
image552×962 16 KB

If I go into inspect, I noticed that the margin is just the original height of the image from hui-picture-entity-card. Any idea what I would need to change alongside ha-card from my yaml above to get rid of that space?