Home/ Questions/Q 7447329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T12:34:41+00:00

I’m a CSS noob. I have an image of an arrow that I’m using

  • 0

I’m a CSS noob. I have an image of an arrow that I’m using to show the user’s heading on a Google map. I want to use css transforms (e.g. webkit-transform:rotate(15deg);) to rotate the arrow in real time to match the user’s heading (I’m pulling heading information from an iOS app; the webpage is simply embedded in the app). What is the most efficient way in javascript to update just the webkit-transform:rotate(ndeg) property, considering I need to update it quite frequently to replace n with the number of degrees of the user’s heading?

PS I already know how to inject javascript from an iOS app into a webpage; for all intents and purposes the heading information could be coming from somewhere else, I’m just interested in the javascript side of the equation.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Like jfriend00 said, you can use [htmlelement].style.[styleproperty]. Two remarks using the textarea in this page as example (try it in the browser console ;~):

    1. you can also use the regular css-property using bracket notation:

      document.querySelector('textarea').style['-webkit-transform'] = 'rotate(5deg)';

    2. you can reinstate the original style using

      document.querySelector('textarea').style['-webkit-transform'] = '';

    • 0