> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/styling-and-effects/3d-transform.md).

# 3D Transform

The 3D Transform component wraps other components and gives them depth, perspective, and three-dimensional movement. Use it for tilting cards, rotating artwork, creating hover interactions, or making content respond to the visitor’s pointer.

### How to Use 3D Transform

You’ll find 3D Transform under **Interactive** in the Components list.

1. Drag **3D Transform** onto the page.
2. Place the component you want to transform inside its drop zone.
3. In **3D**, choose Static, Hover, or Mouse.
4. Set the perspective and the starting transform values.
5. For Hover or Mouse, switch **State** to End and set the destination values.
6. Preview the page in a browser to test the interaction.

### Component Settings

#### Transforms

These are the standard two-dimensional transform controls applied before the 3D effect.

**Type**

* **None** — Applies no transform. This is the default.
* **Static** — Applies one fixed transform.
* **Hover** — Animates between Start and End values when the selected element is hovered.

For Hover transforms, **Over** chooses the trigger: Self, Parent, Container, Grid, Flex, or Custom ID. When using Custom ID, enter the ID of the element that should trigger the effect.

**Origin** sets the pivot point. **Scale** defaults to 100%, **Rotate** to 0°, Translate to `0px`, and both Skew values to 0°. Hover mode provides separate Start and End values.

#### 3D

**Type**

* **None** — Disables 3D transforms. This is the default.
* **Static** — Applies a fixed 3D transform.
* **Hover** — Animates between Start and End values on hover.
* **Mouse** — Changes the transform in response to pointer movement.

For Hover and Mouse, **Over** selects Self, Parent, Container, Grid, Flex, or Custom ID as the trigger.

**Perspective**

* **Distance** — Controls the strength of the perspective, from the most exaggerated to the most subtle: Dramatic (100px), Near (300px), Normal (500px), Midrange (800px), and Distant (1200px). Shorter distances exaggerate the 3D effect. None removes the perspective, flattening the result. The default is Normal.
* **Origin** — Sets the viewpoint from Center or any edge or corner. The default is Center.

**Backface**

Enable **Hide** to prevent the reverse side of rotated content from showing. It is off by default.

**Transform Values**

* **X** and **Y** rotate the content around the horizontal and vertical axes. Both default to 0°.
* **Scale Z** controls depth scaling and defaults to 100%. It has no visible effect on its own — combine it with a Rotate X or Rotate Y value.
* **Depth** moves the content towards or away from the viewer and defaults to `0px`. Use any CSS length such as `10px` or `2rem`; percentages are not supported.

Hover and Mouse modes provide separate Start and End values.

#### Transitions

Transitions control how quickly Hover and Mouse states change. Set the animated property, easing curve, duration, and delay in the standard Transitions controls.

### Accessibility

Keep important content readable without the effect. Avoid large or rapid pointer-driven movement, and provide enough contrast when a transform changes the component’s appearance.

### Tips and Best Practices

* **Start subtly:** Small rotations and modest perspective usually feel more natural.
* **Test the backface:** Enable Backface Hide when content looks mirrored during a rotation.
* **Preview in a browser:** Mouse tracking and hover behaviour are best tested outside Edit mode.

### Related Components

* [Reveal](/elements-docs/using-elements/components/navigation-and-interaction/reveal.md) — Animates content as it enters the viewport.
* [Container](/elements-docs/using-elements/components/layout-components/container.md) — Groups and styles the content placed inside a 3D Transform.

| Common Control                                                                                                     | Description                                                             |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| [Link](/elements-docs/using-elements/components/common-controls/link.md)                                           | Link to a page, resource, anchor, email address, or website.            |
| [Layout](/elements-docs/using-elements/components/common-controls/layout.md)                                       | Control positioning, stacking, visibility, overflow, and isolation.     |
| [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md)                                       | Set width, height, and responsive size constraints.                     |
| [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md)                                     | Add responsive margin and padding.                                      |
| [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. |
| [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md)                             | Apply colour, image, gradient, SVG, video, and hover backgrounds.       |
| [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md)                             | Choose what animates and set its timing curve, duration, and delay.     |
| [Effects](/elements-docs/using-elements/components/common-controls/effects.md)                                     | Apply shadows, opacity, and hover effects.                              |
| [Filters](/elements-docs/using-elements/components/common-controls/filters.md)                                     | Apply blur, brightness, saturation, shadow, and backdrop effects.       |
| [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md)                               | Scale, rotate, move, and skew components.                               |
| [Borders](/elements-docs/using-elements/components/common-controls/borders.md)                                     | Set border style, colour, opacity, width, radius, and hover states.     |
| [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md)                                   | Add CSS classes and IDs, or change supported HTML tags.                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/styling-and-effects/3d-transform.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.