Utilities for controlling transform behavior.
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.
Utilities for specifying the origin for an element's transformations.
export default {
theme: {
extend: {
transformOrigin: {
24: '6rem',
full: '100%',
},
},
},
}
Utilities for rotating elements with transform.
export default {
theme: {
rotate: {
sq: '90deg',
},
},
}
Utilities for scaling elements with transform.
export default {
theme: {
scale: {
half: '.5',
full: '1',
},
},
}
Utilities for skewing elements with transform.
export default {
theme: {
extend: {
skew: {
sq: '90deg',
},
},
},
}
Utilities for translating elements with transform.
You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:
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.
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%',
},
},
},
}
The perspect
utility determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
export default {
theme: {
extend: {
perspective: {
'8xl': '96rem',
'9xl': '128rem',
},
},
},
}
The perspect-origin
utility determines the position at which the viewer is looking. It is used as the vanishing point by the perspect utility.
export default {
theme: {
extend: {
perspectiveOrigin: {
tb150: '150% 150%',
tb200: '200% 200%',
},
},
},
}