Learn the Front-end Beta Search

transform

Draft

Definition

The transform CSS property applies 2D or 3D transformations to an element. It allows you to modify the coordinate space of an element by rotating, scaling, skewing, or translating it. Transformations are applied after the element’s position and size are calculated, making them perfect for animations and visual effects without affecting the document flow.

Syntax

transform: <transform-function> [<transform-function>] *;

Values

2D Transform Functions

Basic 2D transformations:

.element {
  transform: translate(10px, 20px); /* Move element */
  transform: rotate(45deg); /* Rotate element */
  transform: scale(1.5); /* Scale element */
  transform: skew(10deg, 5deg); /* Skew element */
}

3D Transform Functions

3D transformations:

.element {
  transform: translate3d(10px, 20px, 30px); /* 3D translation */
  transform: rotateX(45deg); /* Rotate around X-axis */
  transform: rotateY(45deg); /* Rotate around Y-axis */
  transform: rotateZ(45deg); /* Rotate around Z-axis */
  transform: scale3d(1.5, 1.5, 1.5); /* 3D scaling */
}

Multiple Transforms

Combining multiple transformations:

.element {
  transform: translate(10px, 20px) rotate(45deg) scale(1.2);
  transform: rotateX(45deg) translateZ(50px) scale(1.5);
}

Examples

Basic 2D Transforms

HTML

Basic 2D Transforms:

Translate (Move):

Rotate:

Scale:

Skew:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Basic 2D Transforms:</h3>

  <div class="space-y-6">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Translate (Move):</h4>
      <div class="relative h-24 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 w-12 h-12 bg-blue-500 rounded"></div>
        <div class="absolute top-4 left-4 w-12 h-12 bg-green-500 rounded transform translate-x-8 translate-y-4"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Rotate:</h4>
      <div class="relative h-24 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 w-12 h-12 bg-blue-500 rounded"></div>
        <div class="absolute top-4 left-4 w-12 h-12 bg-green-500 rounded transform rotate-45"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Scale:</h4>
      <div class="relative h-24 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 w-12 h-12 bg-blue-500 rounded"></div>
        <div class="absolute top-4 left-4 w-12 h-12 bg-green-500 rounded transform scale-150"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Skew:</h4>
      <div class="relative h-24 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 w-12 h-12 bg-blue-500 rounded"></div>
        <div class="absolute top-4 left-4 w-12 h-12 bg-green-500 rounded transform skew-x-12"></div>
      </div>
    </div>

  </div>
</div>

3D Transforms

HTML

3D Transforms:

3D Rotation:

3D Translation:

3D Scale:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">3D Transforms:</h3>

  <div class="space-y-6">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">3D Rotation:</h4>
      <div class="relative h-32 bg-gray-200 rounded perspective-1000">
        <div class="absolute top-8 left-8 w-16 h-16 bg-blue-500 rounded transform rotate-x-45"></div>
        <div class="absolute top-8 left-8 w-16 h-16 bg-green-500 rounded transform rotate-y-45"></div>
        <div class="absolute top-8 left-8 w-16 h-16 bg-purple-500 rounded transform rotate-z-45"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">3D Translation:</h4>
      <div class="relative h-32 bg-gray-200 rounded perspective-1000">
        <div class="absolute top-8 left-8 w-16 h-16 bg-blue-500 rounded"></div>
        <div class="absolute top-8 left-8 w-16 h-16 bg-green-500 rounded transform translate-z-8"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">3D Scale:</h4>
      <div class="relative h-32 bg-gray-200 rounded perspective-1000">
        <div class="absolute top-8 left-8 w-16 h-16 bg-blue-500 rounded"></div>
        <div class="absolute top-8 left-8 w-16 h-16 bg-green-500 rounded transform scale-3d-150"></div>
      </div>
    </div>

  </div>
</div>

Transform with Hover Effects

HTML

Transform with Hover Effects:

Hover Scale:

Hover Rotate:

Hover Translate:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Transform with Hover Effects:</h3>

  <div class="space-y-6">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Hover Scale:</h4>
      <div class="space-x-4">
        <div class="w-16 h-16 bg-blue-500 rounded hover:scale-110 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-green-500 rounded hover:scale-125 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-purple-500 rounded hover:scale-150 transition-transform cursor-pointer"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Hover Rotate:</h4>
      <div class="space-x-4">
        <div class="w-16 h-16 bg-blue-500 rounded hover:rotate-45 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-green-500 rounded hover:rotate-90 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-purple-500 rounded hover:rotate-180 transition-transform cursor-pointer"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Hover Translate:</h4>
      <div class="space-x-4">
        <div class="w-16 h-16 bg-blue-500 rounded hover:translate-y-2 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-green-500 rounded hover:translate-x-2 transition-transform cursor-pointer"></div>
        <div class="w-16 h-16 bg-purple-500 rounded hover:-translate-y-2 transition-transform cursor-pointer"></div>
      </div>
    </div>

  </div>
</div>

Transform for Animations

HTML

Transform for Animations:

Pulse Animation:

Bounce Animation:

Spin Animation:

Ping Animation:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Transform for Animations:</h3>

  <div class="space-y-6">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Pulse Animation:</h4>
      <div class="w-16 h-16 bg-blue-500 rounded animate-pulse"></div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Bounce Animation:</h4>
      <div class="w-16 h-16 bg-green-500 rounded animate-bounce"></div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Spin Animation:</h4>
      <div class="w-16 h-16 bg-purple-500 rounded animate-spin"></div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Ping Animation:</h4>
      <div class="w-16 h-16 bg-orange-500 rounded animate-ping"></div>
    </div>

  </div>
</div>

Transform for Layout

HTML

Transform for Layout:

Centering Elements:

Tilted Elements:

Layered Elements:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Transform for Layout:</h3>

  <div class="space-y-6">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Centering Elements:</h4>
      <div class="relative h-32 bg-gray-200 rounded">
        <div class="absolute top-1/2 left-1/2 w-16 h-16 bg-blue-500 rounded transform -translate-x-1/2 -translate-y-1/2"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Tilted Elements:</h4>
      <div class="space-x-4">
        <div class="w-16 h-16 bg-blue-500 rounded transform -skew-x-12"></div>
        <div class="w-16 h-16 bg-green-500 rounded transform skew-x-12"></div>
        <div class="w-16 h-16 bg-purple-500 rounded transform skew-y-12"></div>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Layered Elements:</h4>
      <div class="relative h-24 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 w-12 h-12 bg-blue-500 rounded transform rotate-12"></div>
        <div class="absolute top-6 left-6 w-12 h-12 bg-green-500 rounded transform -rotate-12"></div>
        <div class="absolute top-8 left-8 w-12 h-12 bg-purple-500 rounded transform rotate-6"></div>
      </div>
    </div>

  </div>
</div>

Transform Best Practices

HTML

Transform Best Practices:

Good Transform Usage:

✓ Use transforms for animations and effects

✓ Combine with transitions for smooth animations

✓ Use transforms for centering elements

✓ Consider performance implications

Performance Tips:

✓ Use transform instead of changing position properties

✓ Use will-change for elements that will be animated

✓ Avoid animating layout properties

✓ Use transform3d to enable hardware acceleration

Common Mistakes to Avoid:

✗ Using transforms for layout instead of positioning

✗ Not considering accessibility implications

✗ Overusing complex transforms

✗ Not testing on different devices

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Transform Best Practices:</h3>

  <div class="space-y-6">
    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Good Transform Usage:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Use transforms for animations and effects</p>
        <p class="text-base text-gray-700">✓ Combine with transitions for smooth animations</p>
        <p class="text-base text-gray-700">✓ Use transforms for centering elements</p>
        <p class="text-base text-gray-700">✓ Consider performance implications</p>
      </div>
    </div>

    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Performance Tips:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Use transform instead of changing position properties</p>
        <p class="text-base text-gray-700">✓ Use will-change for elements that will be animated</p>
        <p class="text-base text-gray-700">✓ Avoid animating layout properties</p>
        <p class="text-base text-gray-700">✓ Use transform3d to enable hardware acceleration</p>
      </div>
    </div>

    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Common Mistakes to Avoid:</h4>
      <div class="space-y-2">
        <p class="text-base text-red-600">✗ Using transforms for layout instead of positioning</p>
        <p class="text-base text-red-600">✗ Not considering accessibility implications</p>
        <p class="text-base text-red-600">✗ Overusing complex transforms</p>
        <p class="text-base text-red-600">✗ Not testing on different devices</p>
      </div>
    </div>

  </div>
</div>

Browser Support

The transform property has excellent browser support:

  • All browsers: Full support for basic 2D transforms
  • Modern browsers: Full support for 3D transforms and all functions
  • Internet Explorer: Full support for 2D transforms (IE9+), 3D transforms (IE10+)

Best Practices

  1. Performance: Use transforms instead of changing position properties for animations
  2. Hardware acceleration: Use transform3d to enable GPU acceleration
  3. Accessibility: Consider users with motion sensitivity
  4. Testing: Test transforms on different devices and browsers
  5. Consistency: Use consistent transform values throughout your design
  6. Documentation: Document complex transform combinations

Common Use Cases

  • Animations: Creating smooth, performant animations
  • Hover effects: Adding interactive visual feedback
  • Layout: Centering elements and creating unique layouts
  • 3D effects: Creating depth and perspective
  • Transitions: Smooth state changes between elements
  • Loading states: Creating engaging loading animations
  • Interactive elements: Enhancing user interface interactions
  • transform-origin: Sets the origin point for transformations
  • transform-style: Controls how nested elements are rendered in 3D space
  • perspective: Sets the perspective for 3D transforms
  • perspective-origin: Sets the origin point for perspective
  • backface-visibility: Controls visibility of the back face
  • transition: Creates smooth transitions between transform states
  • animation: Creates keyframe animations with transforms