Is there a way for me to individually style each card image only once? For example, I want to apply a transform style via a function in CSS; I want the image to maintain its original value, but when a new component is rendered, that card should have a different transform value applied while keeping the existing component style unchanged. Currently, all transform styles are being re-rendered with different values. Is this achievable in a functional component in React? Depending on where I place my current variable inside the Card function, all values keep changing. If placed outside of the Card function, the values remain static and the cards stack on top of each other, making only one card visible.
const getStyle = () => {
let angle = Math.random() * 90 - 45
let xPos = Math.random() * 40 - 20
let yPos = Math.random() * 40 - 20
let transform = `translate(${xPos}px, ${yPos}px) rotate(${angle}deg)`
return transform
}
const Card = (props) => {
let current = getStyle()
return (
<img style={{ transform: current }} className="Card" alt={props.name} src={props.cardImg} />
)
}