# Transforming Content

## Moving, Scaling, and Rotating 3D Content

### Using Touch Screen Gestures

You can use touch screen gestures
 to **temporarily** transform 3D content.

Rotate content by taping the screen with **one finger** and moving the finger around the screen.

![](/files/-M8X0NXAXVFtfyja6RTg)

Scale content by pinching the screen with **two fingers**.

![](/files/-M8X1KLK2fo0h-M3yQVk)

### Using Metadata

You can use metadata to **persistently** transform 3D content.

If the content is too big or too small or if you'd like to move or rotate it, go back to the platform and [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to affect its transformation. After adding or changing metadata you can instantly see the changes in the browser even **while the experience is running**.

The following keys are words the system uses as pre-defined metadata keys to control transformations:

<table data-header-hidden><thead><tr><th width="150">Keyword</th><th width="150">Type</th><th>Options</th><th>Effect</th></tr></thead><tbody><tr><td>Keyword</td><td>Type</td><td>Options</td><td>Effect</td></tr><tr><td>x</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Moves the asset on the x-axis</td></tr><tr><td>y</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Moves the asset on the y-axis</td></tr><tr><td>z</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Moves the asset on the z-axis</td></tr><tr><td>scale</td><td>float</td><td><p>Any positive number.</p><p>Default value is 1.</p></td><td>Grows or shrinks the asset uniformly</td></tr><tr><td>height</td><td>integer</td><td>Any positive number.</td><td>Set the height of an image asset or a video asset</td></tr><tr><td>width</td><td>integer</td><td>Any positive number.</td><td>Set the width of an image asset or a video asset</td></tr><tr><td>xAngle</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Rotates the model on the x-axis</td></tr><tr><td>yAngle</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Rotates the model on the y-axis</td></tr><tr><td>zAngle</td><td>float</td><td><p>Any positive or negative number.</p><p>Default value is 0.</p></td><td>Rotates the model on the z-axis</td></tr></tbody></table>

## Adding Text to 3D Content

If you'd like to annotate the content, go back to the platform and [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to add text. After adding or changing metadata you can instantly see the changes in the browser even **while the experience is running**.

The following keys are words the system uses as pre-defined metadata keys to add and design text:

| Keyword              | Type        | Options                                                          | Description                                     |
| -------------------- | ----------- | ---------------------------------------------------------------- | ----------------------------------------------- |
| text                 | string      | Any string. The character ';' represents a line break.           | Text to appear with the 3D content              |
| textColor            | string      | <p>Any color.</p><p>Default value is "white".</p>                | Color of the text                               |
| textPosition         | float,float | Any pair of positive or negative numbers. Default value is "0,2" | Position of the text relative to the 3D content |
| textScale            | float       | <p>Any positive number.</p><p>Default value is "2".</p>          | Scale of the text                               |
| textBackground       | string      | <p>Any string.</p><p>Default is no background.</p>               | Color of the text background plane              |
| textBackgroundHeight | float       | <p>Any positive number.</p><p>Default value is "1".</p>          | Height of the text background plane             |
| textBackgroundWidth  | float       | <p>Any positive number.</p><p>Default value is "1".</p>          | Width of the text background plane              |

![](/files/-MB16PMpVDbaClreT4EK)

{% hint style="info" %}
If changes are not instantly visible try refreshing the browser after adding metadata for the changes to take effect.&#x20;
{% endhint %}

## Muting 3D Content

{% hint style="success" %}
Muting is only supported for 3D videos.
{% endhint %}

If you'd like to stop a video asset from playing sound as it is playing, go back to the platform and [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to mute it. After adding metadata, refresh the browser.

The following key is a word the system uses as a pre-defined metadata key to mute a video:

| Keyword | Type    | Options                                                       | Effect                           |
| ------- | ------- | ------------------------------------------------------------- | -------------------------------- |
| mute    | boolean | <p>Either 'true' or 'false'.</p><p>Default value 'false'.</p> | Mute the sound of a video assets |

{% hint style="info" %}
Remember to refresh the browser after adding metadata with AR.js experiences for the changes to take effect.&#x20;
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.echo3d.com/ar.js/transforming-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.