# Style for (Icon) Rotation **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [January 30, 2023, 8:23pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177 "2023-01-30T20:23:55Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 30, 2023, 8:23pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/1 "2023-01-30T20:23:55Z")
I want to animate an icon component to rotate. I think I should be able to get this done with a CSS style. I created a blank style called `Rotation` and added the following to my CSS stylesheet: ```auto @keyframes runRotate { from {transform: rotate(0deg);} to {transform: rotate(-359deg);} } .psc-Rotation{ -webkit-animation: runRotate 2s linear infinite; } ``` To apply the style, I had to add the "classes" section to the icon's style group (why it's not there to begin with is odd, but adding it manually works). But, after applying the style the icon is not rotating. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [January 30, 2023, 8:42pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/2 "2023-01-30T20:42:09Z")
One possible method [IconRotate.zip](https://forum.inductiveautomation.com/uploads/short-url/uRH3cQZULZmSfRotS6ZFpOufKng.zip) (6.5 KB) ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 30, 2023, 9:05pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/3 "2023-01-30T21:05:10Z")
Seems to be working, but only on the view (yours) I imported. If I apply the same ```auto animation: ia_symbolComponent__animate--rotate linear infinite; animation-duration: 2000ms; transform-origin: center; ``` styles to my icon, whether directly or using the stylesheet, it's not working for me ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [January 30, 2023, 9:07pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/4 "2023-01-30T21:07:39Z")
There is nothing special about my View, this method doesn't require a theme or stylesheet. Not sure what's going on, maybe create a new View and start over. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 30, 2023, 9:14pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/5 "2023-01-30T21:14:18Z")
> [@amarks](#): > > But, after applying the style the icon is not rotating. Using the supplied style rules, and after placing `classes: Rotation` into my `style` object, my Icon immediately began rotating in place as expected (8.1.24). ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 30, 2023, 9:19pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/6 "2023-01-30T21:19:13Z")
8.1.23, my stylesheet method is not working: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2b405e6d1e06f829fae775bfa4941fb69da0c443.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/ff3322abf6ccce5032ad186635967d97a5915cd2.png) ```auto .psc-Spin{ animation: ia_symbolComponent__animate--rotate linear infinite; animation-duration: 2000ms; animation-direction: reverse; } ``` `Alarms/Icons/Spin` is an empty style ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 30, 2023, 10:05pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/7 "2023-01-30T22:05:25Z")
Sorry for the confusion, but I meant _using the original rules you had supplied in the first post_ my Icon was working correctly. I suspect you're running into a (minor) known issue where changes to the stylesheet resource are not always picked up by View resources until either the project is saved, or the View is closed and re-opened. This is because the View obtains the stylesheet when the View is opened, and doesn't listen for changes appropriately. Using the original rule from the first post, try saving your project again and see if it works. Also, as a side-note: If you define a rule for a selector in stylesheet.css, and assign that "class" to the object, you actually don't even need to make a Style Class in Perspective; the defined classname ("Spin" in your example) will be applied to the component regardless of the existence of a matching Perspective Style. In the following screenshot, you can see I have no `RedStroke` Style resource. ![Screenshot 2023-01-30 at 2.01.03 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9ad4918d2419e66c83a0a8a50b731f8e322a3407.png) ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 30, 2023, 10:20pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/8 "2023-01-30T22:20:18Z")
> [@cmallonee](#): > > I suspect you're running into a (minor) known issue where changes to the stylesheet resource are not always picked up by View resources until either the project is saved, or the View is closed and re-opened. This is because the View obtains the stylesheet when the View is opened, and doesn't listen for changes appropriately. > > In the following screenshot, you can see I have no `RedStroke` Style resource. > > ![Screenshot 2023-01-30 at 2.01.03 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9ad4918d2419e66c83a0a8a50b731f8e322a3407.png) The update must've been the issue > [@cmallonee](#): > > Also, as a side-note: > If you define a rule for a selector in stylesheet.css, and assign that "class" to the object, you actually don't even need to make a Style Class in Perspective; the defined classname ("Spin" in your example) will be applied to the component regardless of the existence of a matching Perspective Style. Thanks for the tip! ---
**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\ **Post date:** [February 21, 2023, 8:58am UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/9 "2023-02-21T08:58:30Z")
Hello Everyone, Where can I find this kind of information/script? How I can find the Key value combination that can be used like this? ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [February 21, 2023, 12:20pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/10 "2023-02-21T12:20:14Z")
There are so many keys in CSS that IA doesn't document them itself. Try any on-line CSS training resource you like. ---
**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\ **Post date:** [February 21, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/11 "2023-02-21T13:40:40Z")
> [@amarks](#): > > `animation: ia_symbolComponent__animate--rotate linear infinite;` Thank you for the reply @pturmel, can you please tell me, how we will know the "ia\_symbolComponent" we need to use? little bit confused in those areas, how we will find each object, and how we need to give, Sorry I'm a beginner in this part. Can you please help? ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 21, 2023, 1:47pm UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/12 "2023-02-21T13:47:42Z")
Right click, inspect, to open up dev console in the browser. Example from pump, ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f0f18055cd0126050d5139554878b71c3d31759.png) ---
**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\ **Post date:** [February 22, 2023, 4:16am UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/13 "2023-02-22T04:16:25Z")
Thank you very much, Now it's clear, Any suggestions for taking a course on CSS @pturmel @jlandwerlen , where it will be better? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [February 22, 2023, 4:32am UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/14 "2023-02-22T04:32:46Z")
> [@John\_S1](#): > > Any suggestions for taking a course on CSS There are good resources listed in this thread: • [How to learn perspective the right way](https://forum.inductiveautomation.com/t/how-to-learn-perspective-the-right-way/64362) Here is a CSS Cheatsheet: • [CSS CheatSheet](https://htmlcheatsheet.com/css/) For fun, there are some CSS training games listed in this post: • [Comprehensive list of programming games](https://forum.inductiveautomation.com/t/gaming-conflict-of-nations-ww3/68703/7) ---
**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\ **Post date:** [February 22, 2023, 9:41am UTC](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177/15 "2023-02-22T09:41:05Z")
Thanks , I will have a look at those.