Transforms

Apply 2D and 3D transformations to views with React Native’s transform API. All transforms compile to optimized transform arrays at build time.

Scale

Uniform Scale

<View className="scale-0" />    // scale: 0
<View className="scale-50" />   // scale: 0.5
<View className="scale-100" />  // scale: 1
<View className="scale-110" />  // scale: 1.1
<View className="scale-150" />  // scale: 1.5

Axis-Specific Scale

<View className="scale-x-110" /> // scaleX: 1.1
<View className="scale-y-90" />  // scaleY: 0.9

Arbitrary Values

<View className="scale-[1.23]" />   // scale: 1.23
<View className="scale-x-[0.5]" />  // scaleX: 0.5
<View className="scale-y-[2.5]" />  // scaleY: 2.5

Rotate

2D Rotation

<View className="rotate-0" />    // rotate: '0deg'
<View className="rotate-45" />   // rotate: '45deg'
<View className="rotate-90" />   // rotate: '90deg'
<View className="rotate-180" />  // rotate: '180deg'
<View className="-rotate-45" />  // rotate: '-45deg'

3D Rotation

<View className="rotate-x-45" /> // rotateX: '45deg'
<View className="rotate-y-30" /> // rotateY: '30deg'
<View className="rotate-z-90" /> // rotateZ: '90deg'

Arbitrary Values

<View className="rotate-[37deg]" />     // rotate: '37deg'
<View className="-rotate-[15deg]" />    // rotate: '-15deg'
<View className="rotate-x-[30deg]" />   // rotateX: '30deg'

Translate

Uses spacing scale (same as m-*, p-*):

<View className="translate-x-4" />  // translateX: 16
<View className="translate-y-2" />  // translateY: 8
<View className="-translate-x-4" /> // translateX: -16
<View className="-translate-y-2" /> // translateY: -8

Arbitrary Values

<View className="translate-x-[50px]" />  // translateX: 50
<View className="translate-y-[100px]" /> // translateY: 100
<View className="translate-x-[50%]" />   // translateX: '50%'

Skew

<View className="skew-x-6" />   // skewX: '6deg'
<View className="skew-y-3" />   // skewY: '3deg'
<View className="-skew-x-6" />  // skewX: '-6deg'
<View className="-skew-y-3" />  // skewY: '-3deg'

Arbitrary Values

<View className="skew-x-[15deg]" />  // skewX: '15deg'
<View className="-skew-y-[8deg]" />  // skewY: '-8deg'

Perspective

<View className="perspective-500">
  <View className="rotate-x-45 w-16 h-16 bg-blue-500" />
</View>

Arbitrary Values

<View className="perspective-[1500]" /> // perspective: 1500
<View className="perspective-[2000]" /> // perspective: 2000

Examples

Scale

<View className="scale-110 p-4">
  <Text>Scaled content (1.1x larger)</Text>
</View>

Rotate

<View className="rotate-45 w-16 h-16 bg-blue-500" />

Translate

<View className="translate-x-4 translate-y-2 bg-red-500 p-4">
  Moved 16px right, 8px down
</View>

3D Rotation

<View className="rotate-x-45 w-16 h-16 bg-yellow-500" />
<View className="rotate-y-30 w-16 h-16 bg-teal-500" />

Skew

<View className="skew-x-6 w-16 h-16 bg-cyan-500" />

Multiple Transforms Limitation

Caution

Due to the current architecture, multiple transform classes on the same element will overwrite each other. For example:

// ❌ Only rotate-45 will apply (overwrites scale-110)
<View className="scale-110 rotate-45 w-16 h-16 bg-blue-500" />

// ✅ Workaround: Use nested Views for multiple transforms
<View className="scale-110">
  <View className="rotate-45">
    <View className="w-16 h-16 bg-blue-500" />
  </View>
</View>

This limitation exists because the current parser uses Object.assign() which overwrites the transform property.

What’s Not Supported

• transform-origin — Not available in React Native (transforms always use center as origin)

Note

All transform parsing happens at compile-time with zero runtime overhead. Each transform compiles to a React Native transform array:

• transform: [{ scale: 1.1 }]
• transform: [{ rotate: '45deg' }]
• transform: [{ translateX: 16 }]

Related

• Spacing - For translate values
• Layout - Positioning utilities