# transforms


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Backface Visibility Utilities

Control whether the back face of an element is visible when rotated:

------------------------------------------------------------------------

### test_transforms_backface_examples

``` python

def test_transforms_backface_examples(
    
):

```

*Test backface visibility utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# 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 factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Perspective Utilities

Control the perspective of 3D-transformed elements:

------------------------------------------------------------------------

### PerspectiveFactory

``` python

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.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Perspective named scales
PERSPECTIVE_VALUES = {
    "dramatic": "perspective-dramatic",
    "near": "perspective-near", 
    "normal": "perspective-normal",
    "midrange": "perspective-midrange",
    "distant": "perspective-distant",
    "none": "perspective-none"
}
```

</details>

------------------------------------------------------------------------

### test_transforms_perspective_examples

``` python

def test_transforms_perspective_examples(
    
):

```

*Test perspective utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
perspective = PerspectiveFactory(PERSPECTIVE_VALUES, "Perspective utilities for controlling an element's perspective when placed in 3D space") # The perspective factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Perspective Origin Utilities

Control the perspective origin of 3D-transformed elements:

------------------------------------------------------------------------

### PerspectiveOriginFactory

``` python

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.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# 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"
}
```

</details>

------------------------------------------------------------------------

### test_transforms_perspective_origin_examples

``` python

def test_transforms_perspective_origin_examples(
    
):

```

*Test perspective origin utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
perspective_origin = PerspectiveOriginFactory(
    PERSPECTIVE_ORIGIN_VALUES, 
    "Perspective origin utilities for controlling an element's perspective origin when placed in 3D space"
) # The perspective origin factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Rotate Utilities

Control the rotation of elements with support for 3D rotations:

------------------------------------------------------------------------

### RotateUtility

``` python

def RotateUtility(
    prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):

```

*Utility class for rotation with angle support.*

------------------------------------------------------------------------

### RotateFactory

``` python

def RotateFactory(
    
):

```

*Factory for rotation utilities with directional support.*

------------------------------------------------------------------------

### NegativeRotateFactory

``` python

def NegativeRotateFactory(
    args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

```

*Factory for negative rotation utilities.*

------------------------------------------------------------------------

### test_transforms_rotate_examples

``` python

def test_transforms_rotate_examples(
    
):

```

*Test rotate utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
rotate = RotateFactory() # The rotate factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Scale Utilities

Control the scale of elements with support for directional scaling:

------------------------------------------------------------------------

### ScaleUtility

``` python

def ScaleUtility(
    prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):

```

*Utility class for scaling with percentage support.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# 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)
)
```

</details>

------------------------------------------------------------------------

### ScaleFactory

``` python

def ScaleFactory(
    
):

```

*Factory for scale utilities with directional and 3D support.*

------------------------------------------------------------------------

### NegativeScaleFactory

``` python

def NegativeScaleFactory(
    args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

```

*Factory for negative scale utilities.*

------------------------------------------------------------------------

### test_transforms_scale_examples

``` python

def test_transforms_scale_examples(
    
):

```

*Test scale utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
scale_tw = ScaleFactory() # The scale factory (renamed to avoid conflict with built-in scale)
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Skew Utilities

Control the skew transformation of elements:

------------------------------------------------------------------------

### SkewUtility

``` python

def SkewUtility(
    prefix:str, # The utility prefix (e.g., 'w' for width, 'p' for padding)
):

```

*Utility class for skewing with angle support.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Skew angle values
SKEW_ANGLES = [0, 1, 2, 3, 6, 12] # Common skew angles in degrees
```

</details>

------------------------------------------------------------------------

### SkewFactory

``` python

def SkewFactory(
    
):

```

*Factory for skew utilities with directional support.*

------------------------------------------------------------------------

### NegativeSkewFactory

``` python

def NegativeSkewFactory(
    args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

```

*Factory for negative skew utilities.*

------------------------------------------------------------------------

### test_transforms_skew_examples

``` python

def test_transforms_skew_examples(
    
):

```

*Test skew utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
skew = SkewFactory() # The skew factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Transform Utilities

Control CSS transform properties:

------------------------------------------------------------------------

### TransformFactory

``` python

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.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Transform utilities
TRANSFORM_VALUES = {
    "none": "transform-none",
    "gpu": "transform-gpu",
    "cpu": "transform-cpu"
}
```

</details>

------------------------------------------------------------------------

### test_transforms_transform_examples

``` python

def test_transforms_transform_examples(
    
):

```

*Test transform utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
transform = TransformFactory(TRANSFORM_VALUES, "Transform utilities for transforming elements") # The transform factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Transform Origin Utilities

Control the origin point for transformations:

------------------------------------------------------------------------

### TransformOriginFactory

``` python

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.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# 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"
}
```

</details>

------------------------------------------------------------------------

### test_transforms_origin_examples

``` python

def test_transforms_origin_examples(
    
):

```

*Test transform origin utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
origin = TransformOriginFactory(
    TRANSFORM_ORIGIN_VALUES, 
    "Transform origin utilities for specifying the origin for an element's transformations"
) # The transform origin factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Transform Style Utilities

Control whether child elements are positioned in 3D space:

------------------------------------------------------------------------

### test_transforms_style_examples

``` python

def test_transforms_style_examples(
    
):

```

*Test transform style utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# 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 factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Translate Utilities

Control the translation of elements with support for directional and 3D
translations:

------------------------------------------------------------------------

### TranslateFactory

``` python

def TranslateFactory(
    
):

```

*Factory for translate utilities with directional and 3D support.*

------------------------------------------------------------------------

### test_transforms_translate_examples

``` python

def test_transforms_translate_examples(
    
):

```

*Test translate utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
translate = TranslateFactory() # The translate factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def 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()
```

</details>

## Practical Examples

Let’s see how to use these transform utilities in real FastHTML
components:

------------------------------------------------------------------------

### test_transforms_fasthtml_examples

``` python

def test_transforms_fasthtml_examples(
    
):

```

*Test transform utilities in practical FastHTML component examples.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

``` html
<div class="grid gap-5">
<button class="hover:scale-110 hover:rotate-3 transition-transform">Hover Me</button>  <div class="perspective-normal">
    <div class="transform-3d transition-transform duration-700 hover:rotate-y-180">
      <div class="backface-hidden">Front</div>
      <div class="backface-hidden rotate-y-180">Back</div>
    </div>
  </div>
  <div>
    <div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Modal Content</div>
  </div>
  <div class="-skew-y-3 origin-left h-24 bg-gray-100"></div>
  <div class="scale-110 translate-y-[calc(var(--scroll-y) * -0.5)] transform-gpu">
<img src="bg.jpg">  </div>
  <div class="transform-3d animate-spin-3d">
    <div class="absolute w-full h-full">Front</div>
    <div class="absolute w-full h-full backface-hidden">Back</div>
    <div class="absolute w-full h-full backface-hidden">Top</div>
    <div class="absolute w-full h-full backface-hidden">Bottom</div>
    <div class="absolute w-full h-full backface-hidden">Left</div>
    <div class="absolute w-full h-full backface-hidden">Right</div>
  </div>
</div>
```

``` python
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()
```

## Helper Functions

Convenient functions for common transform patterns:

------------------------------------------------------------------------

### center_transform

``` python

def center_transform(
    
)->str: # Classes to center an element using translate transformations

```

*Center an element using transform translate.*

------------------------------------------------------------------------

### hover_scale

``` python

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.*

------------------------------------------------------------------------

### flip_card_3d

``` python

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.*

------------------------------------------------------------------------

### parallax_transform

``` python

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.*

------------------------------------------------------------------------

### test_transforms_helper_examples

``` python

def test_transforms_helper_examples(
    
):

```

*Test helper functions for common transform patterns.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
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()
```

</details>

## Export