package tw

  1. Overview
  2. Docs
package tw
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Module Tw.TransformsSource

Transform utilities for 2D and 3D transformations

https://tailwindcss.com/docs/rotate https://tailwindcss.com/docs/scale https://tailwindcss.com/docs/translate https://tailwindcss.com/docs/skew https://tailwindcss.com/docs/transform-origin

2D Transform Utilities

Sourceval rotate : int -> Utility.t

rotate deg rotates element by deg degrees.

Sourceval translate_x : int -> Utility.t

translate_x n translates element horizontally by n * 0.25rem.

Sourceval translate_x' : float -> Utility.t

translate_x' n is translate_x for a half-step scale value (e.g. translate_x' 0.5 for translate-x-0.5).

Sourceval translate_y : int -> Utility.t

translate_y n translates element vertically by n * 0.25rem.

Sourceval translate_y' : float -> Utility.t

translate_y' n is translate_y for a half-step scale value.

Sourceval scale : int -> Utility.t

scale n scales element by n%.

Sourceval scale_x : int -> Utility.t

scale_x n scales element horizontally by n%.

Sourceval scale_y : int -> Utility.t

scale_y n scales element vertically by n%.

Sourceval skew_x : int -> Utility.t

skew_x deg skews element horizontally by deg degrees.

Sourceval skew_y : int -> Utility.t

skew_y deg skews element vertically by deg degrees.

Sourceval translate_x_fraction : int -> int -> Utility.t

translate_x_fraction num denom translates element horizontally by calc(num/denom * 100%).

Sourceval translate_y_fraction : int -> int -> Utility.t

translate_y_fraction num denom translates element vertically by calc(num/denom * 100%).

Sourceval neg_translate_x_1_2 : Utility.t

neg_translate_x_1_2 translates element -50% along the X axis (useful for centering).

Sourceval neg_translate_y_1_2 : Utility.t

neg_translate_y_1_2 translates element -50% along the Y axis (useful for centering).

3D Transform Utilities

Sourceval rotate_x : int -> Utility.t

rotate_x deg rotates element around X axis by deg degrees.

Sourceval rotate_y : int -> Utility.t

rotate_y deg rotates element around Y axis by deg degrees.

Sourceval rotate_z : int -> Utility.t

rotate_z deg rotates element around Z axis by deg degrees.

Sourceval translate_z : int -> Utility.t

translate_z n translates element along Z axis by n pixels.

Sourceval translate_z' : float -> Utility.t

translate_z' n is translate_z for a half-step scale value.

Sourceval scale_z : int -> Utility.t

scale_z n scales element along Z axis by n%.

Sourceval perspective_none : Utility.t

perspective_none removes perspective (perspective: none).

Sourceval perspective_dramatic : Utility.t

perspective_dramatic sets a short perspective distance for dramatic 3D effects (perspective: var(--perspective-dramatic)).

Sourceval perspective_near : Utility.t

perspective_near sets a near perspective distance (perspective: var(--perspective-near)).

Sourceval perspective_normal : Utility.t

perspective_normal sets a normal perspective distance (perspective: var(--perspective-normal)).

Sourceval perspective_midrange : Utility.t

perspective_midrange sets a mid-range perspective distance (perspective: var(--perspective-midrange)).

Sourceval perspective_distant : Utility.t

perspective_distant sets a distant perspective (perspective: var(--perspective-distant)).

Sourceval perspective_origin_center : Utility.t

perspective_origin_center sets perspective origin to center.

Sourceval perspective_origin_top : Utility.t

perspective_origin_top sets perspective origin to top.

Sourceval perspective_origin_bottom : Utility.t

perspective_origin_bottom sets perspective origin to bottom.

Sourceval perspective_origin_left : Utility.t

perspective_origin_left sets perspective origin to left.

Sourceval perspective_origin_right : Utility.t

perspective_origin_right sets perspective origin to right.

Sourceval transform_style_3d : Utility.t

transform_style_3d preserves 3D positioning of child elements.

Sourceval transform_style_flat : Utility.t

transform_style_flat flattens 3D positioning of child elements.

Sourceval transform_box_border : Utility.t

transform_box_border sets the reference box for transform to border-box.

Sourceval transform_box_content : Utility.t

transform_box_content sets the reference box for transform to content-box.

Sourceval transform_box_fill : Utility.t

transform_box_fill sets the reference box for transform to fill-box.

Sourceval transform_box_stroke : Utility.t

transform_box_stroke sets the reference box for transform to stroke-box.

Sourceval transform_box_view : Utility.t

transform_box_view sets the reference box for transform to view-box.

Sourceval backface_visible : Utility.t

backface_visible makes the back face visible when rotated.

Sourceval backface_hidden : Utility.t

backface_hidden hides the back face when rotated.

Transform Control Utilities

Sourceval transform : Utility.t

transform is the base transform utility that sets CSS custom properties for transforms.

Sourceval transform_none : Utility.t

transform_none removes all transforms.

Sourceval transform_gpu : Utility.t

transform_gpu forces GPU acceleration for transforms.

Transform Origin Utilities

Sourceval origin_center : Utility.t

origin_center sets transform origin to center.

Sourceval origin_top : Utility.t

origin_top sets transform origin to top center.

Sourceval origin_bottom : Utility.t

origin_bottom sets transform origin to bottom center.

Sourceval origin_left : Utility.t

origin_left sets transform origin to left center.

Sourceval origin_right : Utility.t

origin_right sets transform origin to right center.

Sourceval origin_top_left : Utility.t

origin_top_left sets transform origin to top left.

Sourceval origin_top_right : Utility.t

origin_top_right sets transform origin to top right.

Sourceval origin_bottom_left : Utility.t

origin_bottom_left sets transform origin to bottom left.

Sourceval origin_bottom_right : Utility.t

origin_bottom_right sets transform origin to bottom right.