Rotate pop-up image based on rotation angle attribute

Question

I am trying to get an image in a popup to rotate based on a rotation angle attribute. I accomplished this in ArcGIS Pro:

The symbol at the top is a transparent .png. I used HTML with embedded style to rotate based on the symbol rotation field:

Expression 1 above is a simple arcade expression that selects an image URL based on the symbol type that is clicked. "transform: rotate({SymbolRotation}deg);" correctly rotates the image.

However, I cannot get this to work in ArcGIS Online. The image displays, but is not rotated:

When I copy/pasted the same HTML code that I used in ArcPro, it changed it to this:

The rotation style is still in there, but it doesn't work.

Help?

JonathanDawe_BAS · Answer

For anyone interested in a workaround to achieve this then I came up with a novel workflow. Some image hosting providers such as cloudinary allow you to specify an angle to rotate the image through the url that you provide. I used this to rotate the image based on the features attribute information.

`<img src="https://res.cloudinary.com/dwnvivbjn/image/upload/a_${Round($feature.heading_d)}/v1726068745/compass_ql0nwz.png" width="45" height="45" alt="Icon">`

ChristopherCounsell · Answer

It's more the case of what is supported is in the documentation, which is
html tags, in the context of text editors and pop-ups. Div and style
attributes are there.

Other parts of the platform that support CSS clearly state it is supported
E.g.

https://doc.arcgis.com/en/hub/sites/customizing-sites-with-html-and-css.htm

I don't think you need a documentation page to state that CSS is not
supported in popups. What you should use are the supported html tags. Often
where things work, but aren't officially documented or supported, you can
run into issues. e.g. it might stop working or not work in all clients.

Trisarahtops · Answer

Thanks for sharing that idea link. The confusing thing is that some of my CSS styling seems to be working, but the image rotation isn't. Here's an example of some CSS styling that works. The popup is on the left and the HTML/CSS is on the right.

I assume that you are correct, the rotation style simply isn't supported. I just wish that information was listed somewhere.