Utilities
Transforms
Panda provides utilities for transforming elements.
Scale
Control the scale property. Supported value is auto
<div className={css({ scale: 'auto' })} /> // => 'var(--scale-x) var(--scale-y)'Scale X
Control the scaleX property.
<div className={css({ scaleX: '1.3' })} /> // => --scale-x: 1.3;Scale Y
Control the scaleY property.
<div className={css({ scaleY: '0.4' })} /> // => --scale-y: 0.4;Translate
Control the translate property. Supported value is auto
<div className={css({ translate: 'auto' })} /> // => 'var(--translate-x) var(--translate-y)'Translate X
Control the translateX property.
<div className={css({ translateX: '50%' })} /> // => --translate-x: 50%;
<div className={css({ x: '20px' })} /> // shorthandTranslate Y
Control the translateY property.
<div className={css({ translateY: '-40%' })} /> // => --translate-y: -40%;
<div className={css({ y: '4rem' })} /> // shorthand