javascript - React JSX Transform has no effect

Question

Here is the code: Also posted on CodePen

    
    let transStyle = {
            flex: 1,
            backgroundColor: '#cccc99',
            width:200,
            height:200,
            transform: [
                { perspective: 500 },
                { translateX: -45 },
                { rotateY: '60deg' },
            ],
    }
    
   
    const App = (
        <div style={{padding:100}}>
              <div style={transStyle}>mydiv</div>
        </div>
    );
    
    
    ReactDOM.render(
      App,
      document.getElementById("app")
    );

The transform effect which works perfectly in CSS form does not work in JSX. The need for JSX is so values can be changed real time. If you know what is wrong please update pen thanks.

Answer 1

I think style prop only supports one level of keys. Converting from array to one string seems to work:

    let transStyle = {
        flex: 1,
        backgroundColor: '#cccc99',
        width:200,
        height:200,
        transform: `perspective(850px) translateX(-30px) rotateY(60deg)`,
    }