Utilities for controlling transform behaviour.

React propsCSS Properties
transform--x-translate-x: 0;
--x-translate-y: 0;
--x-rotate: 0;
--x-skew-x: 0;
--x-skew-y: 0;
--x-scale-x: 0;
--x-scale-y: 0;
transform: translate3d(var(--x-translate-x), var(--x-translate-y), 0) rotate(var(--x-rotate)) skewX(var(--x-skew-x)) skewY(var(--x-skew-y)) scaleX(var(--x-scale-x)) scaleY(var(--x-scale-y));
transform={value}transform: {value};

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)" />


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.



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


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.


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')}; `


Get a font size in any component using useTransform hook:

import { useTransform } from '@xstyled/...' function Card() { const transform = useTransform('card') }
Edit this page on GitHub