> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-tilt-1.md).

# Image Tilt #1

### Component Structure

* **IT1 COMPONENT** (Section): A full viewport height container designed to center its contents. It is the primary wrapper for the image tilt effect, ensuring that the effect is displayed prominently within the viewport.
* **IT1 CONTAINER** (Container): Directly holds the image wrapper, aligning it centrally both vertically and horizontally within the section.
  * **IT1 IMAGE WRAPPER** (Div): Applies a `perspective` style through the `it1__img-wrapper` class, setting up the necessary 3D space for the tilt effect to occur.
    * **IT1 IMAGE** (Image): The target image for the tilt effect, referenced with the `it1__img` class. The image is sourced from an external URL and is the focal point for the interactive tilt animations.

### Animation Structure

**Events**

1. **IT1 - MOUSELEAVE**: Resets the tilt effect on the image to its original state when the mouse leaves the `.it1__img-wrapper` area. This event ensures that the image returns to a flat position, with no rotation on the X or Y axes.
2. **IT1 - MOUSEMOVE**: Triggers the tilt effect based on the mouse's position relative to the `.it1__img-wrapper`. The image's rotation on the Y-axis (horizontal tilt) and X-axis (vertical tilt) is dynamically calculated based on the mouse position, creating an interactive 3D effect as the user moves the cursor over the image. The calculated rotation ensures that the tilt mirrors the direction of cursor movement, enhancing the perception of depth and interactivity.


---

# 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://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-tilt-1.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.