Picture-elements card state-icon: trying to make a mdi:fan rotate on its axis, but can't be centered

Configuration Frontend
1

Hi everybody,

in a picture elements card, the purpose is to place a state-icon that should rotate and spin to show that a fan is turned on.
I have card_mod installed.
I made the icon spin, but it doesnt spin on its axis and transform-origin seems to be useless.
after days I must surrender and ask help:

here s the code:

  - type: picture-elements
    image: local/y-07-bagnobianco.png
    title: null
    card_mod:
      style: >
        ha-card { 
        color: black; background: white; box-shadow: none; 
        }
        @keyframes my-blink { 
         from {opacity: 0;} to {opacity: 100;} 
        from {opacity: 100;} to {opacity: 0;} 
         }   
        @keyframes rotation{ 
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
         } 
         :host { 
          --animation-07-02: {% if 
        is_state('input_select.icona_smart_plug_bagno_bianco', '0') and
        is_state('switch.bagno_bianco_stufetta_o_ventilatore_locale_outlet','on')%}
        rotation 1s linear infinite  {% else %} none {%endif%}  
         }              
    elements:
      - type: state-icon
        entity: switch.bagno_bianco_stufetta_o_ventilatore_template
        style:
          top: 1%
          left: 90%
          '--mdc-icon-size': 42px
          animation: var(--animation-07-02)
        tap_action:
          action: toggle
2

There is a special forum for card-mod questions:

Chek also this post by @Ildar_Gabdullin that has a lot of tips:

1 Like
3

thank you !

1 Like
4

Just check if your issue gets solved if you add this to your styles:

'--ha-icon-display': inline ## <-- this
'--mdc-icon-size': 42px
animation: var(--animation-07-02)

Edit:

I think that if you change it to inline then you cannot change the size, so, it is better if you try to change the transform-origin in pixels:

transform-origin: XXXpx YYYpx

Start to change XXX and YYY pixel by pixel until you reach your sweet spot.

5

very interesting,

“display:inline” works!

both on desktop and samsung mobile companion app.

it would be interesting to clearify the reason of this behaviour.

display:inline should be used to align 2 css entiites inside a container,right?

so , what’s the other one?