Control whether the back face of an element is visible when rotated:
def test_transforms_backface_examples(
):
Test backface visibility utilities.
# Backface visibility utilities
BACKFACE_VALUES = {
"hidden": "backface-hidden",
"visible": "backface-visible"
}
backface = SimpleFactory(BACKFACE_VALUES, "Backface visibility utilities for controlling if an element's backface is visible") # The backface visibility factorydef test_transforms_backface_examples():
"""Test backface visibility utilities."""
assert str(backface.hidden) == "backface-hidden"
assert str(backface.visible) == "backface-visible"
# Run the test
test_transforms_backface_examples()Control the perspective of 3D-transformed elements:
def PerspectiveFactory(
values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
doc:Optional=None, # Optional documentation string
):
Factory for perspective with both named and custom values.
# Perspective named scales
PERSPECTIVE_VALUES = {
"dramatic": "perspective-dramatic",
"near": "perspective-near",
"normal": "perspective-normal",
"midrange": "perspective-midrange",
"distant": "perspective-distant",
"none": "perspective-none"
}
def test_transforms_perspective_examples(
):
Test perspective utilities.
perspective = PerspectiveFactory(PERSPECTIVE_VALUES, "Perspective utilities for controlling an element's perspective when placed in 3D space") # The perspective factorydef test_transforms_perspective_examples():
"""Test perspective utilities."""
# Named perspectives
assert str(perspective.dramatic) == "perspective-dramatic"
assert str(perspective.near) == "perspective-near"
assert str(perspective.normal) == "perspective-normal"
assert str(perspective.midrange) == "perspective-midrange"
assert str(perspective.distant) == "perspective-distant"
assert str(perspective.none) == "perspective-none"
# Custom perspectives
assert perspective("500px") == "perspective-[500px]"
assert perspective("10rem") == "perspective-[10rem]"
assert perspective("--custom-perspective") == "perspective-(--custom-perspective)"
# Run the test
test_transforms_perspective_examples()Control the perspective origin of 3D-transformed elements:
def PerspectiveOriginFactory(
values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
doc:Optional=None, # Optional documentation string
):
Factory for perspective origin with both fixed and custom values.
# Perspective origin positions - combines fixed positions with custom value support
PERSPECTIVE_ORIGIN_VALUES = {
"center": "perspective-origin-center",
"top": "perspective-origin-top",
"top-right": "perspective-origin-top-right",
"right": "perspective-origin-right",
"bottom-right": "perspective-origin-bottom-right",
"bottom": "perspective-origin-bottom",
"bottom-left": "perspective-origin-bottom-left",
"left": "perspective-origin-left",
"top-left": "perspective-origin-top-left"
}
def test_transforms_perspective_origin_examples(
):
Test perspective origin utilities.
perspective_origin = PerspectiveOriginFactory(
PERSPECTIVE_ORIGIN_VALUES,
"Perspective origin utilities for controlling an element's perspective origin when placed in 3D space"
) # The perspective origin factorydef test_transforms_perspective_origin_examples():
"""Test perspective origin utilities."""
# Fixed positions
assert str(perspective_origin.center) == "perspective-origin-center"
assert str(perspective_origin.top) == "perspective-origin-top"
assert str(perspective_origin.bottom_right) == "perspective-origin-bottom-right"
assert str(perspective_origin.top_left) == "perspective-origin-top-left"
# Custom positions
assert perspective_origin("50% 25%") == "perspective-origin-[50% 25%]"
assert perspective_origin("10px 20px") == "perspective-origin-[10px 20px]"
assert perspective_origin("--custom-origin") == "perspective-origin-(--custom-origin)"
# Run the test
test_transforms_perspective_origin_examples()Control the rotation of elements with support for 3D rotations:
def RotateUtility(
prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):
Utility class for rotation with angle support.
def RotateFactory(
):
Factory for rotation utilities with directional support.
def NegativeRotateFactory(
args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):
Factory for negative rotation utilities.
def test_transforms_rotate_examples(
):
Test rotate utilities.
rotate = RotateFactory() # The rotate factorydef test_transforms_rotate_examples():
"""Test rotate utilities."""
# Basic rotations
assert str(rotate(0)) == "rotate-0"
assert str(rotate(45)) == "rotate-45"
assert str(rotate(90)) == "rotate-90"
assert str(rotate(180)) == "rotate-180"
assert str(rotate.none) == "rotate-none"
assert str(rotate._45) == "rotate-45"
# Negative rotations
assert str(rotate(45, negative=True)) == "-rotate-45"
assert str(rotate.negative(90)) == "-rotate-90"
assert str(rotate.negative._180) == "-rotate-180"
# Directional rotations
assert str(rotate.x(45)) == "rotate-x-45"
assert str(rotate.y(90)) == "rotate-y-90"
assert str(rotate.z(180)) == "rotate-z-180"
assert str(rotate.x.negative(45)) == "-rotate-x-45"
# Arbitrary values
assert str(rotate("30deg")) == "rotate-[30deg]"
assert str(rotate("0.25turn")) == "rotate-[0.25turn]"
assert str(rotate("--rotation")) == "rotate-(--rotation)"
# Run the test
test_transforms_rotate_examples()Control the scale of elements with support for directional scaling:
def ScaleUtility(
prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):
Utility class for scaling with percentage support.
# Scale percentage values
SCALE_VALUES = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150] # Common scale percentages
# Configuration for scale utilities
SCALE_CONFIG = ScaleConfig(
numeric=False, # Not using standard numeric scale
decimals=False,
fractions=False,
named=None,
special={"none": "none"},
negative=True # Support negative scaling (flip)
)
def ScaleFactory(
):
Factory for scale utilities with directional and 3D support.
def NegativeScaleFactory(
args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):
Factory for negative scale utilities.
def test_transforms_scale_examples(
):
Test scale utilities.
scale_tw = ScaleFactory() # The scale factory (renamed to avoid conflict with built-in scale)def test_transforms_scale_examples():
"""Test scale utilities."""
# Basic scaling
assert str(scale_tw(0)) == "scale-0"
assert str(scale_tw(50)) == "scale-50"
assert str(scale_tw(100)) == "scale-100"
assert str(scale_tw(150)) == "scale-150"
assert str(scale_tw.none) == "scale-none"
assert str(scale_tw._75) == "scale-75"
# Negative scaling
assert str(scale_tw(100, negative=True)) == "-scale-100"
assert str(scale_tw.negative(50)) == "-scale-50"
assert str(scale_tw.negative._75) == "-scale-75"
# Directional scaling
assert str(scale_tw.x(50)) == "scale-x-50"
assert str(scale_tw.y(150)) == "scale-y-150"
assert str(scale_tw.z(75)) == "scale-z-75"
assert str(scale_tw.x.negative(100)) == "-scale-x-100"
# 3D scaling
assert str(scale_tw._3d) == "scale-3d"
# Arbitrary values
assert str(scale_tw("1.5")) == "scale-[1.5]"
assert str(scale_tw("200%")) == "scale-[200%]"
assert str(scale_tw("--scale-custom")) == "scale-(--scale-custom)"
# Run the test
test_transforms_scale_examples()Control the skew transformation of elements:
def SkewUtility(
prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):
Utility class for skewing with angle support.
# Skew angle values
SKEW_ANGLES = [0, 1, 2, 3, 6, 12] # Common skew angles in degrees
def SkewFactory(
):
Factory for skew utilities with directional support.
def NegativeSkewFactory(
args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):
Factory for negative skew utilities.
def test_transforms_skew_examples(
):
Test skew utilities.
skew = SkewFactory() # The skew factorydef test_transforms_skew_examples():
"""Test skew utilities."""
# Basic skewing
assert str(skew(0)) == "skew-0"
assert str(skew(3)) == "skew-3"
assert str(skew(6)) == "skew-6"
assert str(skew(12)) == "skew-12"
assert str(skew._3) == "skew-3"
# Negative skewing
assert str(skew(6, negative=True)) == "-skew-6"
assert str(skew.negative(12)) == "-skew-12"
assert str(skew.negative._3) == "-skew-3"
# Directional skewing
assert str(skew.x(3)) == "skew-x-3"
assert str(skew.y(6)) == "skew-y-6"
assert str(skew.x._12) == "skew-x-12"
assert str(skew.x.negative(6)) == "-skew-x-6"
assert str(skew.y.negative._3) == "-skew-y-3"
# Arbitrary values
assert str(skew("15deg")) == "skew-[15deg]"
assert str(skew("0.5rad")) == "skew-[0.5rad]"
assert str(skew("--skew-custom")) == "skew-(--skew-custom)"
# Run the test
test_transforms_skew_examples()Control CSS transform properties:
def TransformFactory(
values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
doc:Optional=None, # Optional documentation string
):
Factory for transform utilities with special and custom values.
# Transform utilities
TRANSFORM_VALUES = {
"none": "transform-none",
"gpu": "transform-gpu",
"cpu": "transform-cpu"
}
def test_transforms_transform_examples(
):
Test transform utilities.
transform = TransformFactory(TRANSFORM_VALUES, "Transform utilities for transforming elements") # The transform factorydef test_transforms_transform_examples():
"""Test transform utilities."""
# Special values
assert str(transform.none) == "transform-none"
assert str(transform.gpu) == "transform-gpu"
assert str(transform.cpu) == "transform-cpu"
# Custom transforms
assert transform("npu") == "transform-npu"
assert transform("--custom-value") == "transform-(--custom-value)"
# Run the test
test_transforms_transform_examples()Control the origin point for transformations:
def TransformOriginFactory(
values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
doc:Optional=None, # Optional documentation string
):
Factory for transform origin with both fixed and custom values.
# Transform origin positions - combines fixed positions with custom value support
TRANSFORM_ORIGIN_VALUES = {
"center": "origin-center",
"top": "origin-top",
"top-right": "origin-top-right",
"right": "origin-right",
"bottom-right": "origin-bottom-right",
"bottom": "origin-bottom",
"bottom-left": "origin-bottom-left",
"left": "origin-left",
"top-left": "origin-top-left"
}
def test_transforms_origin_examples(
):
Test transform origin utilities.
origin = TransformOriginFactory(
TRANSFORM_ORIGIN_VALUES,
"Transform origin utilities for specifying the origin for an element's transformations"
) # The transform origin factorydef test_transforms_origin_examples():
"""Test transform origin utilities."""
# Fixed positions
assert str(origin.center) == "origin-center"
assert str(origin.top) == "origin-top"
assert str(origin.bottom_right) == "origin-bottom-right"
assert str(origin.top_left) == "origin-top-left"
# Custom positions
assert origin("50% 25%") == "origin-[50% 25%]"
assert origin("10px 20px") == "origin-[10px 20px]"
assert origin("--custom-origin") == "origin-(--custom-origin)"
# Run the test
test_transforms_origin_examples()Control whether child elements are positioned in 3D space:
def test_transforms_style_examples(
):
Test transform style utilities.
# Transform style utilities
TRANSFORM_STYLE_VALUES = {
"_3d": "transform-3d",
"flat": "transform-flat"
}
transform_style = SimpleFactory(TRANSFORM_STYLE_VALUES, "Transform style utilities for controlling if an element's children are placed in 3D space") # The transform style factorydef test_transforms_style_examples():
"""Test transform style utilities."""
assert str(transform_style._3d) == "transform-3d"
assert str(transform_style.flat) == "transform-flat"
# Run the test
test_transforms_style_examples()Control the translation of elements with support for directional and 3D translations:
def TranslateFactory(
):
Factory for translate utilities with directional and 3D support.
def test_transforms_translate_examples(
):
Test translate utilities.
translate = TranslateFactory() # The translate factorydef test_transforms_translate_examples():
"""Test translate utilities."""
# Basic translations
assert str(translate(0)) == "translate-0"
assert str(translate(4)) == "translate-4"
assert str(translate(8)) == "translate-8"
assert str(translate(2.5)) == "translate-2.5"
assert str(translate.px) == "translate-px"
assert str(translate.full) == "translate-full"
assert str(translate.none) == "translate-none"
# Fractions
assert str(translate("1/2")) == "translate-1/2"
assert str(translate("3/4")) == "translate-3/4"
# Negative translations
assert str(translate(4, negative=True)) == "-translate-4"
assert str(translate.negative(8)) == "-translate-8"
assert str(translate.negative.full) == "-translate-full"
assert str(translate.negative("1/2")) == "-translate-1/2"
# Directional translations
assert str(translate.x(4)) == "translate-x-4"
assert str(translate.y(8)) == "translate-y-8"
assert str(translate.z(2)) == "translate-z-2"
assert str(translate.x.full) == "translate-x-full"
assert str(translate.y("1/2")) == "translate-y-1/2"
assert str(translate.x.negative(4)) == "-translate-x-4"
assert str(translate.y.negative.full) == "-translate-y-full"
# Arbitrary values
assert str(translate("10px")) == "translate-[10px]"
assert str(translate("2.5rem")) == "translate-[2.5rem]"
assert str(translate("--spacing-lg")) == "translate-(--spacing-lg)"
# Run the test
test_transforms_translate_examples()Let’s see how to use these transform utilities in real FastHTML components:
def test_transforms_fasthtml_examples(
):
Test transform utilities in practical FastHTML component examples.
def test_transforms_fasthtml_examples():
"""Test transform utilities in practical FastHTML component examples."""
from fasthtml.common import Div, Button, Img, A
from cjm_fasthtml_tailwind.utilities.transitions_and_animation import transition, duration, animate
from cjm_fasthtml_tailwind.utilities.layout import position, top, left, display_tw
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.backgrounds import bg
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
# Hover effect with scale and rotate
hover_button = Button(
"Hover Me",
cls=combine_classes(
scale_tw(110).hover,
rotate(3).hover,
transition.transform
)
)
assert hover_button.attrs['class'] == "hover:scale-110 hover:rotate-3 transition-transform"
# 3D card flip effect
flip_card = Div(
Div(
Div("Front", cls=str(backface.hidden)),
Div("Back", cls=combine_classes(backface.hidden, str(rotate.y(180)))),
cls=combine_classes(transform_style._3d, transition.transform, duration(700), rotate.y(180).hover)
),
cls=combine_classes(perspective.normal)
)
# Centered modal with translate
modal = Div(
Div(
"Modal Content",
cls=combine_classes(
position.fixed,
top("1/2"),
left("1/2"),
str(translate.x.negative("1/2")),
str(translate.y.negative("1/2"))
)
)
)
# Skewed section divider
skewed_divider = Div(
cls=combine_classes(
str(skew.y.negative(3)),
origin.left,
h(24),
bg.gray._100
)
)
# Parallax effect element
parallax_element = Div(
Img(src="bg.jpg"),
cls=combine_classes(
str(scale_tw(110)),
str(translate.y("calc(var(--scroll-y) * -0.5)")),
transform.gpu
)
)
# 3D rotating cube
cube_face = lambda side: Div(
side,
cls=combine_classes(
position.absolute,
w.full,
h.full,
backface.hidden if side != "Front" else ""
)
)
cube = Div(
cube_face("Front"),
cube_face("Back"),
cube_face("Top"),
cube_face("Bottom"),
cube_face("Left"),
cube_face("Right"),
cls=combine_classes(
transform_style._3d,
animate("spin-3d")
)
)
# Return all examples in a grid layout
return Div(
hover_button,
flip_card,
modal,
skewed_divider,
parallax_element,
cube,
cls=combine_classes(grid_display, gap(5))
)
# Run the test
test_transforms_fasthtml_examples()
test_func = test_transforms_fasthtml_examples
app, rt = create_test_app()
@rt
def index():
return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()Convenient functions for common transform patterns:
def center_transform(
)->str: # Classes to center an element using translate transformations
Center an element using transform translate.
def hover_scale(
scale:int=110, # The scale percentage to apply on hover (e.g., 110 for 110%)
)->str: # Classes to create a hover scale effect with transitions
Create a hover scale effect.
def flip_card_3d(
perspective_value:str='normal', # The perspective value for the 3D effect (e.g., 'normal', 'dramatic', 'distant')
)->Dict: # Dictionary with class strings for container, inner, front, and back elements
Get classes for a 3D flip card effect.
def parallax_transform(
speed:float=0.5, # The parallax scroll speed multiplier (e.g., 0.5 for half speed)
)->str: # Classes to create a parallax transform effect based on scroll position
Create a parallax transform effect.
def test_transforms_helper_examples(
):
Test helper functions for common transform patterns.
def test_transforms_helper_examples():
"""Test helper functions for common transform patterns."""
# Test center transform
assert center_transform() == "-translate-x-1/2 -translate-y-1/2"
# Test hover scale
assert hover_scale() == "hover:scale-110 transition-transform"
assert hover_scale(125) == "hover:scale-125 transition-transform"
# Test flip card 3D
flip_classes = flip_card_3d()
assert flip_classes["container"] == "perspective-normal"
assert "transform-3d" in flip_classes["inner"]
assert flip_classes["front"] == "backface-hidden"
assert "backface-hidden" in flip_classes["back"]
assert "rotate-y-180" in flip_classes["back"]
# Test parallax transform
assert "translate-y-[calc(var(--scroll-y) * -0.5)]" in parallax_transform()
assert "transform-gpu" in parallax_transform()
# Run the test
test_transforms_helper_examples()