CSS Transforms

By /

In this chapter, you will learn about CSS Transforms. Transforms allow you to change the appearance or position of an element without changing the normal layout of the page. You can use transforms to move, rotate, resize, or skew an element. Let’s understand the important css transforms functions step by step.

What are CSS Transforms?

The CSS Transform property is used to visually change an element. For example:

.box {
  transform: rotate(45deg);
}

This rotates the element by 45 degrees.

The most commonly used transform functions are:

  • translate()
  • rotate()
  • scale()
  • skew()

1. The translate() Function

The translate() function moves an element from its original position. For example:

.box {
  transform: translate(50px, 20px);
}

This moves the element:

  • 50px to the right
  • 20px downward

You can also move an element in only one direction.

Move Horizontally

transform: translateX(50px);

Move Vertically

transform: translateY(50px);

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Translate</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      transform: translateX(50px);
    }
  </style>
</head>

<body>

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

</body>
</html>

The box will move 50px to the right.

2. The rotate() Function

The rotate() function rotates an element. You usually use degrees with deg. For example:

.box {
  transform: rotate(45deg);
}

This rotates the element by 45 degrees.

You can also rotate in the opposite direction using a negative value.

transform: rotate(-45deg);

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Rotate</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightgreen;

      transform: rotate(10deg);
    }
  </style>
</head>

<body>

  <div class="box">
    Rotated Box
  </div>

</body>
</html>

3. The scale() Function

The scale() function changes the size of an element. For example:

transform: scale(1.2);

This makes the element 1.2 times larger.

You can also make an element smaller.

transform: scale(0.8);

This makes the element smaller.

Scale Horizontally

transform: scaleX(1.5);

Scale Vertically

transform: scaleY(1.5);

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Scale</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightyellow;

      transform: scale(1.2);
    }
  </style>
</head>

<body>

  <div class="box">
    Scaled Box
  </div>

</body>
</html>

4. The skew() Function

The skew() function tilts an element. For example:

transform: skew(20deg);

This tilts the element.

You can also control horizontal and vertical skew separately.

transform: skewX(20deg);

transform: skewY(20deg);

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Skew</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightpink;

      transform: skew(10deg);
    }
  </style>
</head>

<body>

  <div class="box">
    Skewed Box
  </div>

</body>
</html>

5. Combining Multiple Transforms

You can use more than one transform function together. For example:

.box {
  transform: translateX(50px) rotate(10deg);
}

This moves and rotates the element.

You can also combine more transforms:

transform: translateX(20px) rotate(10deg) scale(1.1);

Example

<!DOCTYPE html>
<html>
<head>
  <title>Multiple CSS Transforms</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      transform:
        translateX(30px)
        rotate(10deg)
        scale(1.1);
    }
  </style>
</head>

<body>

  <div class="box">
    Transformed Box
  </div>

</body>
</html>

6. Transform Origin

By default, an element transforms from its center. The transform-origin property allows you to change that point. For example:

transform-origin: left top;

Now the transformation starts from the top-left corner. Other common values include:

transform-origin: center;
transform-origin: right;
transform-origin: bottom;

This property is especially useful when rotating elements.

7. Transform with Hover

Transforms are commonly used with :hover and CSS transitions.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transform Hover</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightgreen;

      transition: transform 0.3s ease;
    }

    .box:hover {
      transform: scale(1.1);
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

When you move your mouse over the box, it becomes slightly larger. The transform property changes the size, while the transition property makes the change smooth.

Quick Recap

  • CSS Transforms visually change an element.
  • translate() moves an element.
  • rotate() rotates an element.
  • scale() changes the size of an element.
  • skew() tilts an element.
  • You can use multiple transforms together.
  • transform-origin changes the starting point of a transformation.
  • Transforms are commonly used with :hover and transitions.

Frequently Asked Questions (FAQs)

Q1. What are CSS Transforms?

CSS Transforms allow you to visually change an element by moving, rotating, resizing, or tilting it without changing the normal page layout.

Q2. Is this CSS Transform Tutorial suitable for beginners?

Yes, this CSS Transform Tutorial for Beginners explains important transform functions such as translate(), rotate(), scale(), and skew() with simple examples.

Q3. What is the CSS Transform property used for?

The CSS Transform property is used to apply visual transformations to an element, such as moving, rotating, scaling, or skewing it.

Q4. Can I use multiple CSS Transforms on one element?

Yes, you can combine multiple CSS Transforms on one element, such as translate(), rotate(), and scale().

Q5. How are CSS Transforms used with hover effects?

CSS Transforms can be used with :hover to create effects like scaling, rotating, or moving an element. CSS transitions can be added to make these changes smooth.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top