Skip to content

Instantly share code, notes, and snippets.

@guylaor
Last active August 20, 2022 18:24
Show Gist options
  • Save guylaor/31d859f91bd5e601fccb to your computer and use it in GitHub Desktop.
Save guylaor/31d859f91bd5e601fccb to your computer and use it in GitHub Desktop.
Using CSS transform: translate(...) with ReactJS
render: function() {
var cleft = 100;
var ctop = 100;
var ctrans = 'translate('+cleft+'px, '+ctop+'px)';
var css = {
transform: ctrans
}
return (
<div style={css} />
)
}
@guylaor
Copy link
Author

guylaor commented Sep 17, 2015

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 need to first concatenate the string and then pass it to the object. Otherwise, you will get an error.

@iamjohnmills
Copy link

iamjohnmills commented Aug 20, 2022

Here's another way that worked for me:

<div style={{ transform: `translate(10px, 20px)` }}></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment