Transform Origin

Utilities for specifying the origin for an element's transformations.

Usage

Specify an element's transform origin using the transformOrigin={value} utility.

<x.img transform transformOrigin="center" rotate={45} />
<x.img transform transformOrigin="top left" rotate={45} />
<x.img transform transformOrigin="bottom right" rotate={45} />
<x.img transform transformOrigin="left" rotate={45} />

Responsive

To control the transform-origin of an element at a specific breakpoint, use responsive object notation. For example, adding the property transformOrigin={{ md: "top" }} to an element would apply the transformOrigin="top" utility at medium screen sizes and above.

<x.div transform rotate={45} transformOrigin={{ md: 'top' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.