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.

React is apparently REACTing silently to faulty css, I was missing parathesis around my scale value — Gabriel Petersson
– Gabriel Petersson, Commented Jul 22, 2020 at 20:25
Same for me I had transform: "translate(-50%, -50%);" and noticed no difference in styling until I noticed this has been cause by the ; — Matthis Kohli
– Matthis Kohli, Commented Nov 18, 2020 at 1:27

MarvinVK · Accepted Answer · 2016-11-04 14:19:38Z

67

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>
    );
}

answered Nov 4, 2016 at 14:19

MarvinVK

3,0831 gold badge25 silver badges23 bronze badges

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

2 Comments

Dan Zuzevich Over a year ago

Not awesome that React does not emit an error on this, and it just fails silently. Thanks for the correct answer.

Shubham Bhewanewala Over a year ago

but this it is not taking -webkit-transform

redbmk · Accepted Answer · 2016-07-24 15:59:00Z

13

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} />
    )
}

edited Jul 24, 2016 at 15:59

redbmk

4,8143 gold badges29 silver badges49 bronze badges

answered Sep 17, 2015 at 15:49

Guy Laor

5971 gold badge4 silver badges7 bronze badges

Comments

atazmin · Accepted Answer · 2022-01-13 16:20:38Z

5

This worked for me:

 transform: 'translateX(-100%)',

answered Jan 13, 2022 at 16:20

atazmin

5,8751 gold badge41 silver badges31 bronze badges

Comments

Brian Li · Accepted Answer · 2020-07-03 22:46:18Z

3

If the solutions above aren't working, you can also try formatting the transform differently:

render() {
    const xPx = 50;
    const yPercent = 50;
    return <div style={{transform: `translateX(${xPx}px) translateY(${yPercent}%)`}}></div>
}

answered Jul 3, 2020 at 22:46

Brian Li

3,3402 gold badges19 silver badges22 bronze badges

Comments

ninjastarr · Accepted Answer · 2021-06-29 03:02:50Z

3

This can be done using string template literals ` as your value for the transform key:

const styles = {
logo: {
    transform: `translateX(20px)`
},

function Navbar() {
    return (
        <nav style={styles.nav}>
            <div style={styles.wrapper}>
                <p className="logo" style={styles.logo}>Hello</p>
            </div>

For more on template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

answered Jun 29, 2021 at 3:02

ninjastarr

311 bronze badge

Comments

David Buck · Accepted Answer · 2020-08-23 09:18:48Z

2

You can use translate as a property react provides all translate without specifying transform

style={{
  position: "fixed",
  bottom: "0px",
  left: "50%",
  maxWidth:'450px',
  zIndex: 1,
  translateX:'-50%'
}}

edited Aug 23, 2020 at 9:18

David Buck

3,88840 gold badges54 silver badges74 bronze badges

answered Aug 23, 2020 at 8:36

Mabroor Ahmad

423 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related