Using CSS transform: translate(...) with ReactJS

Question

According to https://facebook.github.io/react/tips/inline-styles.html

CSS styles need to be passes as an object to the component. However, if you are trying to use transform styles you will get an error.

Answer 1

Translate also wasn't working for me. I fixed it by adding 'px' behind the var.

ES6 code:

render() {     const x = 100;     const y = 100;     const styles = {          transform: `translate(${x}px, ${y}px)`      };      return (         <div style={styles}></div>     ); } 

Answer 2

My solution was to first concatenate the string and then pass it to the object. Notice the use of 'px' here.

render: function() {      var cleft = 100;     var ctop = 100;     var ctrans = 'translate('+cleft+'px, '+ctop+'px)';     var css = {         transform: ctrans      }      return (          <div style={css} />     ) }