# Transforms

## The API

### [perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)

The **`perspective`** style property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

#### **Type:** `number | string`

#### Conversion

```diff
// CSS
- perspective: 800px;

// React Native
+ perspective: 800,
```

### [perspectiveOrigin](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin)

Determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.

#### **Type:** `string`

#### Conversion

```diff
// CSS
- perspective-origin: bottom left;

// React Native
+ perspectiveOrigin: "bottom left",
```

### [transformOrigin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate() function is the center of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

#### **Type:** `string`

#### **Default:** `'50% 50%'`

#### Conversion

```diff
// CSS
- transform-origin: 0% 50%;

// React Native
+ transformOrigin: "0% 50%",
```

### [transformStyle](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)

Sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. If flattened, the element's children will not exist on their own in the 3D-space.

#### **Type:** `'flat' | 'preserve-3d'`

#### Conversion

```diff
// CSS
- transform-style: preserve-3d;

// React Native
+ transformStyle: 'preserve-3d',
```


---

# 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://baconbrix.gitbook.io/react-native-web/styling/transforms.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.