# Show rotation of blades

**URL:** <https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 24, 2025, 6:55am UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874 "2025-07-24T06:55:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gauravavhad.1989](https://avatars.discourse-cdn.com/v4/letter/g/e5b9ba/32.png) [@gauravavhad.1989](https://forum.inductiveautomation.com/u/gauravavhad.1989)\
**Post date:** [July 24, 2025, 6:55am UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874/1 "2025-07-24T06:55:12Z")

</div>

![WhatsApp_Image_2025-07-24_at_12.07.02__2_-removebg-preview](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/40bf98d16c858912dd1fbb5a75a97e38880c0a67.svg)

 ![WhatsApp_Image_2025-07-24_at_12.07.02__2_-removebg-preview](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd863d3140964cd576d04bc544e302181ecfc689.png)

i have a svg and png images...i want to show the blades in that images rotating.

How do i go about it??

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 24, 2025, 10:56am UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874/2 "2025-07-24T10:56:41Z")

</div>

You'll need the blades, or at least a circle that includes the blades, as a separate element or component. if you want it smooth you should use css to animate it.  
Eg in a p style, make it animated with 2 key frames, one at the start and end. In the start, in the background prop for example, set its value to:  
`;transform: rotate(0deg)`

In the end key frame set it to:  
`;transform: rotate(360deg)`

Apply the style to your blades object

---

<div class="post-metadata">

**Author:** ![robertm](https://avatars.discourse-cdn.com/v4/letter/r/ea5d25/32.png) [@robertm](https://forum.inductiveautomation.com/u/robertm)\
**Post date:** [July 24, 2025, 11:52am UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874/3 "2025-07-24T11:52:05Z")

</div>

Or follow high performance standards and don't animate it. Its distracting and serves no real purpose.

---

<div class="post-metadata">

**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\
**Post date:** [July 24, 2025, 11:57am UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874/4 "2025-07-24T11:57:56Z")

</div>

You can check one of the symbols that Perspective has.

> **[Perspective - Symbols Palette | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-symbols-palette)**
>
> The following symbol components provide you with design options for visualizing HMI. Click on the Symbol component name for a link pointing to a page containing the component's description, properties, and an example of how to configure it.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 24, 2025, 12:58pm UTC](https://forum.inductiveautomation.com/t/show-rotation-of-blades/108874/5 "2025-07-24T12:58:36Z")

</div>

I normally agree, but that's a pretty cool looking 3d render of whatever it is 🙂