Picture Elements card rotate state-label 90 degrees

[sender]

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:

[fedot]

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

[sender]

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

[fedot]

Here: Picture Elements Card - Home Assistant

[sender]

Hmz… the android app does not show it correctly…

[sender]

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

[fedot]

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

[Ildar_Gabdullin]

Styling elements in Picture elements card: a small tutorial

Intro: This thread is dedicated to people who started using the Picture elements card. It contains basic hints for styling elements. This is not about using the "card-mod" - everything regarding the "card-mod" will be described in the corresponding thread. Positioning elements Important notes about positioning How to adapt PE card for different viewports Rotating elements Resizing elements: – scaling elements – changing font-size: state-badge, state-label, service-button – state-icon…

[sender]

What did you mean with this?

[Ildar_Gabdullin]

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

[sender]

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!

[fedot]

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

[sender]

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

transform: rotate(0.25turn)

[Ildar_Gabdullin]

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

[Ildar_Gabdullin]

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

[sender]

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

[Ildar_Gabdullin]

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.

[JKW (Kolja Windeler)]

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:

Styling elements in Picture elements card: a small tutorial

Rotating an element: First let’s consider a rotation around Z-axis. In the example below a rotation applied to these elements: state-badge; state-icon; icon; state-label; service-button; image. There are 2 methods to define an angle: by “turns” (1 turn = 360degrees, used in the example below); by “degrees”. By default because of unknown reason a rotation causes changing the "translate()" style - so it causes changing a position too. To avoid this, the "translate(-50%,-50%)" filter must …

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