Transforms

The API
​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
1
// CSS
2
- perspective: 800px;
3
​
4
// React Native
5
+ perspective: 800,
Copied!
​perspectiveOrigin​
Determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
Type: string
Conversion
1
// CSS
2
- perspective-origin: bottom left;
3
​
4
// React Native
5
+ perspectiveOrigin: "bottom left",
Copied!
​transformOrigin​
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
1
// CSS
2
- transform-origin: 0% 50%;
3
​
4
// React Native
5
+ transformOrigin: "0% 50%",
Copied!
​transformStyle​
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
1
// CSS
2
- transform-style: preserve-3d;
3
​
4
// React Native
5
+ transformStyle: 'preserve-3d',
Copied!