Windi CSSTransforms
Transform Type
Utilities for controlling transform behavior.
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.
Transform Origin
Utilities for specifying the origin for an element's transformations.
Customizing
export default {
theme: {
extend: {
transformOrigin: {
24: '6rem',
full: '100%',
},
},
},
}
Transform Rotate
Utilities for rotating elements with transform.
Customizing
export default {
theme: {
rotate: {
sq: '90deg',
},
},
}
Rotate X
Rotate Y
Rotate Z
Transform Scale
Utilities for scaling elements with transform.
Scale X
Scale Y
Scale Z
Customizing
export default {
theme: {
scale: {
half: '.5',
full: '1',
},
},
}
Transform Skew
Utilities for skewing elements with transform.
Skew X
Skew Y
Customizing
export default {
theme: {
extend: {
skew: {
sq: '90deg',
},
},
},
}
Transform Translate
Utilities for translating elements with transform.
Translate X
Translate Y
Translate Z
Customizing
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%',
},
},
},
}
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.
Customizing
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.
Customizing
export default {
theme: {
extend: {
perspectiveOrigin: {
tb150: '150% 150%',
tb200: '200% 200%',
},
},
},
}