CSS3 transform applied from JS does not work

Question

In my Android Hybrid app which uses Crosswalk need to apply a CSS3 transform to an HTML element at run time. I thought this was a relatively trival task but found that it simply would not work. Initially I suspected that this was down to a missing capability in the Crosswalk/Chromium implementation of the spec. However, to be safe I much the same thing in my desktop Chrome browser as shown below

 document.getElementById('btn').addEventListener('click', transIt); function transIt() { alert('Transforming now!'); var blobStyle = document.getElementById('blob').style; blobStyle.webkitTransform = 'translate(100px,50px);'; blobStyle.webkitTransform = 'translate(100px,50px);'; alert('Did it work?'); } 

 #main { position: relative; margin: auto; margin-top: 20%; height: 200px; width: 50%; border: 1px solid red; border-radius: 8px; box-sizing: border-box; padding: 1em; } #blob { position: absolute; border: 1px solid blue; background-color: blue; border-radius: 2em; height: 2em; width: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } 

 <div id='main'> <div id='blob'>&nbsp;</div> </div> <button id='btn'>Transform It</button> 

Much to my surprise this relatively simple code does not deliver the intended results in Chrome on Windows either. Either I am doing something wrong here that I am unable to spot or else there are other underlying issues at work. Perhaps someone here might have an insight that I do not.

Answer 1

You have two problems:

• The semi-colon ( ; ) in CSS is used to separate property:value pairs. It is not part of the value.
• Vendor prefixed properties are used for experimental features. They should not be used in production. My browser no longer supports webkitTransform because transform has been stable for ages.

Remove the ; from the values and use the transform property instead.

  blobStyle.transform = 'translate(100px,50px)';

You also only need to set the value once .

NB: It is generally better to define these things in a stylesheet and toggle class names instead.

 document.getElementById('btn').addEventListener('click', transIt); function transIt() { alert('Transforming now!'); var blobStyle = document.getElementById('blob').style; blobStyle.transform = 'translate(100px,50px)'; alert('Did it work?'); } 

 #main { position: relative; margin: auto; margin-top: 20%; height: 200px; width: 50%; border: 1px solid red; border-radius: 8px; box-sizing: border-box; padding: 1em; } #blob { position: absolute; border: 1px solid blue; background-color: blue; border-radius: 2em; height: 2em; width: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } 

 <div id='main'> <div id='blob'>&nbsp;</div> </div> <button id='btn'>Transform It</button> 

Answer 2

If you need to set prefixed CSS styles properties, use cssText .

 document.getElementById('btn').addEventListener('click', transIt); function transIt() { document.getElementById('blob').style.cssText = '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);'; } 

 #main { position: relative; margin: auto; margin-top: 20%; height: 200px; width: 50%; border: 1px solid red; border-radius: 8px; box-sizing: border-box; padding: 1em; } #blob { position: absolute; border: 1px solid blue; background-color: blue; border-radius: 2em; height: 2em; width: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } 

 <div id='main'> <div id='blob'>&nbsp;</div> </div> <button id='btn'>Transform It</button> 

---

Or setAttribute()

 document.getElementById('btn').addEventListener('click', transIt); function transIt() { document.getElementById('blob').setAttribute('style', '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);'); } 

 #main { position: relative; margin: auto; margin-top: 20%; height: 200px; width: 50%; border: 1px solid red; border-radius: 8px; box-sizing: border-box; padding: 1em; } #blob { position: absolute; border: 1px solid blue; background-color: blue; border-radius: 2em; height: 2em; width: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } 

 <div id='main'> <div id='blob'>&nbsp;</div> </div> <button id='btn'>Transform It</button> 

---

Update based on a comment

If you already set styles inline, like in this sample where the inline style set the background to red, you need to append the new CSS.

Note, make sure you have a semicolon ; at the beginning of the newCSS string, so the properties are properly separated

 document.getElementById('btn').addEventListener('click', transIt); function transIt() { var newCSS = ';-webkit-transform: translate(100px,50px); transform: translate(100px,50px)' document.getElementById('blob').style.cssText += newCSS; } 

 #main { position: relative; margin: auto; margin-top: 20%; height: 200px; width: 50%; border: 1px solid red; border-radius: 8px; box-sizing: border-box; padding: 1em; } #blob { position: absolute; border: 1px solid blue; background-color: blue; border-radius: 2em; height: 2em; width: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } 

 <div id='main'> <div id='blob' style="background: red;">&nbsp;</div> </div> <button id='btn'>Transform It</button>