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.

Quentin · Accepted Answer · 2017-09-21 16:04:37Z

3

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>

answered Sep 21, 2017 at 16:04

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Isaaс Weisberg Over a year ago

It was the semicolon for me indeed...

Asons · Accepted Answer · 2017-09-22 06:20:53Z

1

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>

edited Sep 22, 2017 at 6:20

answered Sep 21, 2017 at 16:25

Asons

87.7k12 gold badges119 silver badges175 bronze badges

4 Comments

DroidOS Over a year ago

Thank you. I have subsequently "unaccepted" this answer since although it works on Chrome/Windows the issue is not resolved in Crosswalk/Chromium where attempting to set CSS text simply annuls any other styling already applied to the element.

Asons Over a year ago

@DroidOS Updated with a second sample using setAttribute() ... does that work?

Asons Over a year ago

@DroidOS Updated with a 3rd sample

DroidOS Over a year ago

Thank you. I decided to accept your answer since in all fairness you have given a complete answer to my original question. The fact that are issues with Crosswalk/Chromium is another matter altogether. Thanks, again.

Collectives™ on Stack Overflow

CSS3 transform applied from JS does not work

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related