> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/components/transform.md).

# Transform

The **Transform** Component controls the *Position**,** Size*, *Angle*, and *Pivot* of the Layer.

{% hint style="success" %}
The very center of the card is position 0, 0. When you change the size of a Card, all Layers retain their position relative to the center.
{% endhint %}

***

## Canvas Handles

With a Layer selected, you can click and drag the Layer to reposition it in the Canvas.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FEnSF9OTjdg5V3LcQTwj7%2FScreen%20Recording%202026-05-20%20at%2010.58.21%E2%80%AFPM.gif?alt=media&amp;token=ed5c977c-363e-4e5d-b0e6-2c3534d03cba" alt=""><figcaption><p>The <strong>Custom Shape</strong> Component has "Maintain Aspect Ratio" toggled on.</p></figcaption></figure>

Clicking and dragging the squares will adjust the size. Hold "Shift" while dragging to retain the aspect ratio.

The Pivot is represented by the "Donut", currently in the middle. You can drag this around the inside of the bounds to reposition it.

All of these values can be set and modified in the Transform properties in the right panel.

***

## Fit to Card

Click the <picture><source srcset="/files/hdvfKHKboisR5nfm1Y02" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FP8tK8f5QKZl6AH1CiHdt%2FScreenshot%202026-05-20%20at%2011.00.50%E2%80%AFPM.png?alt=media&amp;token=8b389fc6-55da-44cf-9335-315e2648a0ec" alt="" data-size="line"></picture> button to fit the Layer size to the card.

***

## Angle

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FYiBB90ByKZVgRqlijGb4%2FScreen%20Recording%202026-05-28%20at%205.44.50%E2%80%AFPM.gif?alt=media&amp;token=579dbadb-2c80-4988-9e41-c53a3c70bd29" alt=""><figcaption></figcaption></figure>

Rotate the layer. This will also rotate children, relative to the parent.

***

## Pivot

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FbT9c6nuHVFIKlx68JlWK%2FScreen%20Recording%202026-05-28%20at%205.48.11%E2%80%AFPM.gif?alt=media&amp;token=08bbec91-f61f-41ef-8c53-967cec1f86d7" alt=""><figcaption><p>Here the pivot is on the left/middle</p></figcaption></figure>

The pivot point can be dragged to any part of the layer area use the buttons in the Component to set it to the center, or one of the 8 edge points. Pivot is used for various operations like rotations.


---

# 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://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/components/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.