0
0
CSSmarkup~5 mins

Transform property in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The transform property lets you change how an element looks by moving, rotating, scaling, or skewing it. It helps make web pages more lively and interactive.

To move a button slightly when hovered to show it is clickable.
To rotate an image for a fun effect on a photo gallery.
To make a box bigger or smaller smoothly when clicked.
To tilt text or shapes for a creative design.
To slide elements around without changing their position in the page layout.
Syntax
CSS
transform: none | transform-function(s);

You can use one or more transform functions separated by spaces.

Common functions include translate(), rotate(), scale(), and skew().

Examples
This moves the element 50 pixels to the right.
CSS
transform: translateX(50px);
This rotates the element 45 degrees clockwise.
CSS
transform: rotate(45deg);
This makes the element 1.5 times bigger.
CSS
transform: scale(1.5);
This moves the element right 20px and down 10px, then rotates it 30 degrees.
CSS
transform: translate(20px, 10px) rotate(30deg);
Sample Program

This example shows a green box that moves up, rotates slightly, and grows bigger when you hover or focus on it. The transition makes the change smooth. The box is keyboard accessible with tabindex="0" and has an ARIA label for screen readers.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform Property Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      margin: 2rem auto;
      transition: transform 0.5s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      border-radius: 0.5rem;
      user-select: none;
    }
    .box:hover, .box:focus {
      transform: translateY(-20px) rotate(15deg) scale(1.2);
      cursor: pointer;
      outline: none;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <div class="box" tabindex="0" aria-label="Interactive green box">Hover or focus me!</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use transition to make transform changes smooth and nice to watch.

Transforms do not affect the space the element takes on the page, so other elements do not move when you transform.

Remember to add tabindex="0" and ARIA labels for better accessibility when using interactive transforms.

Summary

The transform property changes how an element looks by moving, rotating, scaling, or skewing it.

You can combine multiple transform functions for creative effects.

Use transitions and accessibility features to make transforms smooth and user-friendly.