Transform

Utilities for controlling transform behaviour.

Compose transformations

To enable transformations you have to add the transform utility.

<x.img transform rotate={45} />
<x.img transform skewY={12} />
<x.img transform scale={0.5} />
<x.img transform translateX={4} translateY={4} />

Note that because xstyled implements transforms using CSS custom properties, the transform utilities are not supported in older browsers like IE11. If you need transforms for your project and need to support older browsers, specify explicit transformation (ex: `transform="rotate(45deg)").

Custom transformations

It is also possible to specify a completely custom transformation.

<x.img transform="scale(1.5, 0.5) skew(30deg, 20deg)" />

Responsive

To use transforms at a specific breakpoint, use responsive object notation. For example, adding the property transform={{ md: true }} to an element would apply the transform={true} utility at medium screen sizes and above.

<x.div transform={{ md: true }} />

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

Customizing

Transforms

If you'd like to customize your values for transformations, use the theme.transforms section of your theme.

  // theme.js
  export const theme = {
    transforms: {
+     'scale-xl': 'scale(2, 2)',
    },
  }

Styled bindings

Automatic

Using xstyled's styled, all transformations defined are automatically bound to transform attribute:

import styled from '@xstyled/...'

const Card = styled.h4`
  transform: card;
`

To learn more about styled syntax, read styled syntax documentation.

Manual

It is possible to manually bind a transformation using th.transform utility:

import styled from '...'
import { th } from '@xstyled/...'

const Card = styled.h4`
  font: ${th.transform('card')};
`

Hooks

Get a font size in any component using useTransform hook:

import { useTransform } from '@xstyled/...'

function Card() {
  const transform = useTransform('card')
}