Picture Elements card rotate state-label 90 degrees

Hi,

is it possible to rotate a text field 90 degrees?

I can’t find an answer here: Picture Elements Card - Home Assistant

Is it possible to rotate the 7,4 C 90 degrees in below:
image

type: picture-elements
elements:
  - type: state-label
    entity: binary_sensor.test
    style:
      rotate: 90deg

Thanks! So simple… where could I have found that myself :slight_smile:

Here: Picture Elements Card - Home Assistant

Hmz… the android app does not show it correctly…

Sorry, I’m blind but I cannot find it there…

You can basically map any CSS with that, rotate being one of that

1 Like

What did you mean with this?

You asked about styling - you got the tutorial.
What is not clear?

I asked about rotating and got it answered. Marked it as solution. But then I discovered it was not properly displayed in my android app, only in my browser.

so I am not sure if that is covered in your styling guide? If so, please direct me to the solution since I am not able to find id there.

Thank you for taking the time to respond!

It’s literally the 3rd post in the linked guide click here
Maybe that method works better on mobile.

Yes, that works better. Thank you for this @Ildar_Gabdullin

transform: rotate(0.25turn)

Picture elements may produce a different picture on mobile in part of position, scale. As for rotating - I did not see any differences.

No no no. This is not about degrees or turn. Use translate function.
Actually, whole setup should be reviewed in part of translate.

Sorry, I am not a styling expert :slight_smile: It works… why is it not ok?

image

If it looks ok both on PC and mobile - then fine.
In my experience I had to use same coordinates system (that translate function) for each element.

Hi, I have a follow up question on the rotation part … my labels text is changing (9.0W → 1234.56W) in width. The rotate label (rotation works fine) is moving further to the right. The longer the state the more it is moving to the right.

I assume that the text is usually left aligned to the coordinates and rotated around the center, is that possible? This would at least explain why the text is moving … the longer it get’s the more the center is moving towards the right end … and after that center calculation is rotates around that point.

How can i avoid this? Any ideas?
Thanks, JKW

PS, tested and not working:

  • transform: transform-origin(0%,0%) rotate(270deg)
  • transform: “transform-origin: top left” rotate(270deg)

PPS: I love this community … it’s all there … after searching for 2 days i found it here:

TLDR: transform: translate(-50%,-50%) rotate(270deg)