Transforms

Transform Type

Utilities for controlling transform behavior.

default
gpu
none
CSS

Transform Style

The transform-style utility sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

flat
3d
CSS

Transform Origin

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

center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      transformOrigin: {
        24: '6rem',
        full: '100%',
      },
    },
  },
}

Transform Rotate

Utilities for rotating elements with transform.

0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Customizing
windi.config.js
export default {
  theme: {
    rotate: {
      sq: '90deg',
    },
  },
}

Rotate X

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Rotate Y

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Rotate Z

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Transform Scale

Utilities for scaling elements with transform.

0
25
50
75
90
95
100
105
110
125
150
CSS

Scale X

0
25
50
75
90
95
100
105
110
125
150
CSS

Scale Y

0
25
50
75
90
95
100
105
110
125
150
CSS

Scale Z

0
25
50
75
90
95
100
105
110
125
150
CSS
Customizing
windi.config.js
export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Transform Skew

Utilities for skewing elements with transform.

Skew X

0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Skew Y

0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      skew: {
        sq: '90deg',
      },
    },
  },
}

Transform Translate

Utilities for translating elements with transform.

Translate X

0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS

Translate Y

0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS

Translate Z

0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS
Customizing

You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:

windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

To customize the translate scale separately, use the theme.translate section of your windi.config.js file.

windi.config.js
export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

Perspective

The perspect utility determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

none
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
100
200
300
400
500
600
700
800px
23rem
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin

The perspect-origin utility determines the position at which the viewer is looking. It is used as the vanishing point by the perspect utility.

center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
[150%]
[-150%]
[150%_150%]
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.