CSS Tutorial

Introduction

CSS Properties

CSS Designing

CSS Advance Topics

CSS FAQs

Edit Template

Home
/
CSS 2D Transform

CSS Tutorial

Introduction

CSS Properties

CSS Designing

CSS Advance Topics

CSS FAQs

Edit Template

Home
/
CSS 2D Transform

CSS 2D Transform

The transform property in CSS allows you to visually manipulate elements in two-dimensional space using functions like translate, rotate, scale, and skew. These transformations are applied along the X and Y axes (horizontal and vertical).

Translate – Move an Element

The translate(x, y) function moves an element from its original position.

				
					transform: translate(50px, 30px);

Moves 50px to the right and 30px down.
Negative values move left or up.

Example:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Translate Example – Learn With Arshyan</title>
  <style>
    .box {
      width: 120px;
      height: 120px;
      background-color: navy;
      color: white;
      text-align: center;
      line-height: 120px;
      transform: translate(40px, 20px);
    }
  </style>
</head>
<body>

  <div class="box">Moved</div>

</body>
</html>

Rotate – Turn the Element

The rotate(deg) function rotates an element clockwise by default.

				
					transform: rotate(20deg);

Use a negative value for counterclockwise rotation.

Example:

				
					<style>
  .rotate-box {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    text-align: center;
    line-height: 100px;
    transform: rotate(-15deg);
  }
</style>

<div class="rotate-box">Rotated</div>

Scale – Resize the Element

The scale(x, y) function enlarges or shrinks the element horizontally and vertically.

				
					transform: scale(1.5, 0.8);

Example:

				
					<style>
  .scale-box {
    width: 100px;
    height: 100px;
    background-color: teal;
    color: white;
    text-align: center;
    line-height: 100px;
    transform: scale(1.3, 1.1);
  }
</style>

<div class="scale-box">Scaled</div>

Note: This transformation can stretch or squash the content if the scale values aren’t equal.

Skew – Slant the Element

The skew(x-angle, y-angle) function slants an element horizontally or vertically.

				
					transform: skew(15deg, 5deg);

Example:

				
					<style>
  .skew-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    color: white;
    text-align: center;
    line-height: 100px;
    transform: skew(10deg, 20deg);
  }
</style>

<div class="skew-box">Skewed</div>

You can also skew on a single axis:

				
					transform: skewX(15deg);
transform: skewY(-10deg);

Multiple Transforms

You can combine multiple transforms in one line:

				
					transform: rotate(10deg) scale(1.2) translate(20px, 10px);

Transformations are applied in order from left to right.

Summary Table

Function	Purpose	Syntax Example
`translate(x, y)`	Moves element	`translate(30px, 10px)`
`rotate(deg)`	Rotates clockwise/counterclockwise	`rotate(-25deg)`
`scale(x, y)`	Resizes element	`scale(1.2, 0.9)`
`skew(x, y)`	Slants horizontally or vertically	`skew(10deg, 5deg)`

Learn With Arshyan Tip:

2D transforms are powerful for building animations, hover effects, and dynamic layouts. Try experimenting with these to bring your design to life.