Transform Origin

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

React propsCSS Properties
transformOrigin={value}transform-origin: {value};

Usage

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

<> <template preview> <x.div display="flex" flexDirection={{ xs: 'column', md: 'row' }} justifyContent="space-around" spaceY={{ xs: 0, md: 12 }} spaceY={{ xs: 12, md: 0 }} my={10} > {['center', 'top left', 'bottom right', 'left'].map((keyword) => ( <x.div key={keyword} w={20} h={20} bg="light-blue-300" borderRadius="md" > <x.img h={20} w={20} transform transformOrigin={keyword} rotate={45} borderRadius="md" src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80" /> </x.div> ))} </x.div> </template> <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.

Edit this page on GitHub