Transform css property is dead. Now can use scale , translate , rotate directly. Transform The common way to use it will be...
const styles = {
container: {
position: 'relative',
height: '300px'
},
box: {
position: 'absolute',
border: '1px solid grey',
width: '100px',
height: '100px'
}
}
function OldWay() {
return (
<div css={styles.container}>
<div css={styles.box}>div 1</div>
<div
css={{
...styles.box,
transform: 'translate(170px, 100px) rotate(5deg) scale(2)',
transformOrigin: 'center'
}}
>
div 2
</div>
</div>
)
}
Scale, rotate, translate Newer way to do...
function NewerWay() {
return (
<div css={styles.container}>
<div css={styles.box}>div 1</div>
<div
css={{
...styles.box,
translate: '170px 100px',
rotate: '5deg',
scale: '2',
transformOrigin: 'center'
}}
>
div 2
</div>
</div>
)
}