Chapter 47: Transforms

Core Idea

<TransformsTutorial /> Animation occurs when the visual properties of an element transform over time. Let's look at five common ways to transform an element.

Key Concepts

• The 5 basic transformations
• Opacity
• Scale
• Skew
• Translate
• Rotate
• Multiple transformations
• Using the makeTransform() helper

Code Examples

<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: 'red',
    opacity: 0.5,
  }}
/>

• What it demonstrates: Usage pattern for Transforms from the official docs.

Key Takeaways

1. Understand the 5 basic transformations when working with Transforms.
2. Understand opacity when working with Transforms.
3. Understand scale when working with Transforms.
4. Understand skew when working with Transforms.
5. Understand translate when working with Transforms.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.