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

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-M8Wow5ufGPc0k_Pxmca%2F-M8X0NXAXVFtfyja6RTg%2FGesture%20-%20Moving.jpg?alt=media\&token=57e2f6b0-6e80-4d04-b2f5-7b86fd7f3d99)

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

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-M8Wow5ufGPc0k_Pxmca%2F-M8X1KLK2fo0h-M3yQVk%2FGesture%20-%20Scaling.jpg?alt=media\&token=0a5e53dd-dd5f-4920-b13a-1c2c38975d9b)

### 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](https://docs.echo3d.com/web-console/manage-pages/data-page/how-to-add-data#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](https://docs.echo3d.com/web-console/manage-pages/data-page/how-to-add-data#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              |

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MB11CJ_Nn4mMzR-rfVi%2F-MB16PMpVDbaClreT4EK%2FAddingTextToARjs.JPG?alt=media\&token=425100cd-b0d1-4fc5-9e51-a7c59b97572a)

{% 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](https://docs.echo3d.com/web-console/manage-pages/data-page/how-to-add-data#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 %}