image-transform.tsx

import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div
        style={{
          // width: "200px",
          backgroundColor: "green",
          paddingRight: 13,
          // justifyContent: "space-evenly",
          // flexDirection: "row-reverse",

          display: "flex",
        }}
      >
        {new Array(5).fill(0).map((_, index) => {
          return (
            <div
              key={index}
              style={{
                width: 100,
                height: 100,
                borderRadius: 50,
                backgroundColor: "red",
                transform: `translateX(-${index * 50}px)`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                border: "1px solid black",
              }}
            >
              {index}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;