CSS Transform Origin Practice Questions with Solutions

By /

Introduction

CSS transform-origin controls the point around which a transformed element rotates, scales, or skews. By default, the transformation origin is usually at the center of the element, but you can change it to positions such as top, bottom, left, right, or specific percentage and length values. Understanding transform-origin is useful for creating rotating cards, buttons, menus, animations, and interactive UI effects. CSS Transform Origin practice questions with solutions help to understand the concepts.

Question 1: Set Transform Origin to the Top

Problem Statement

Write CSS to make an element rotate around its top center instead of its default center.

CSS Code

.box {
    transform-origin: top center;
    transform: rotate(30deg);
}

Output

The element rotates around its top-center point.

Explanation

  • transform-origin defines the point used as the reference for transformations.
  • top center places the origin at the top-center of the element.
  • rotate(30deg) rotates the element around that point.

Question 2: Rotate Around the Left Center

Problem Statement

Write CSS to rotate an element around its left-center point.

CSS Code

.box {
    transform-origin: left center;
    transform: rotate(45deg);
}

Output

The element rotates around its left-center point.

Explanation

  • left center places the transformation origin at the left edge and vertical center.
  • The rotation occurs around that point instead of the element’s center.

Question 3: Rotate Around the Bottom-Right Corner

Problem Statement

Write CSS to rotate an element around its bottom-right corner.

CSS Code

.box {
    transform-origin: bottom right;
    transform: rotate(20deg);
}

Output

The element rotates around its bottom-right corner.

Explanation

  • bottom right positions the transformation origin at the bottom-right corner.
  • This can be useful for creating door-like or hinged rotation effects.

Question 4: Use Percentage Values

Problem Statement

Write CSS to set the transformation origin to 25% horizontally and 75% vertically.

CSS Code

.box {
    transform-origin: 25% 75%;
}

Output

The transformation origin is positioned at the specified percentage coordinates.

Explanation

  • The first value controls the horizontal position.
  • The second value controls the vertical position.
  • 0% 0% represents the top-left area.
  • 50% 50% represents the center.
  • 100% 100% represents the bottom-right area.

Question 5: Set Transform Origin Using Pixels

Problem Statement

Write CSS to set the transformation origin to 20px from the left edge and 30px from the top edge.

CSS Code

.box {
    transform-origin: 20px 30px;
    transform: rotate(45deg);
}

Output

The element rotates around the point positioned 20px horizontally and 30px vertically within the element.

Explanation

  • 20px controls the horizontal origin.
  • 30px controls the vertical origin.
  • Using length values allows precise control over the transformation point.

Question 6: Use the Default Transform Origin

Problem Statement

Write CSS to explicitly set the transformation origin to the center of an element.

CSS Code

.box {

    transform-origin: center;
    transform: rotate(30deg);
}

Output

The element rotates around its center point.

Explanation

  • center places the transformation origin at the center of the element.
  • This is also the default origin for most 2D CSS transformations.
  • The rotation occurs evenly around the center.

Question 7: Create a Door-Hinge Effect

Problem Statement

Create a door-like effect where an element rotates around its left edge.

CSS Code

.door {
    transform-origin: left center;
    transform: rotateY(45deg);
}

Output

The element rotates around its left edge, similar to a door attached to a hinge.

Explanation

  • transform-origin: left center places the origin on the left edge.
  • rotateY() rotates the element around the vertical axis.
  • This technique is useful for 3D cards, doors, panels, and interactive UI effects.

Question 8: Change Transform Origin on Hover

Problem Statement

Write CSS so that an element normally rotates around its center but changes its transformation origin to the bottom-right when hovered.

CSS Code

.box {
    transform-origin: center;
    transition: transform 0.4s ease,
                transform-origin 0.4s ease;
}

.box:hover {
    transform-origin: bottom right;
    transform: rotate(20deg);
}

Output

When the user hovers over the element, its transformation origin changes to the bottom-right corner and the element rotates.

Explanation

  • The default origin is the center.
  • :hover changes the origin.
  • transform applies the rotation.
  • transition can make the visual change smoother.

Question 9: Use Transform Origin with Scaling

Problem Statement

Write CSS to make an element scale from its top-left corner.

CSS Code

.box {
    transform-origin: top left;
    transform: scale(1.5);
}

Output

The element expands from its top-left corner instead of expanding equally from its center.

Explanation

  • transform-origin: top left changes the scaling reference point.
  • scale(1.5) increases the element’s size to 150% of its original scale.
  • This technique can be useful for zoom effects.

Question 10: Create a Rotating Card Effect

Problem Statement

Create a card that rotates around its bottom center when hovered.

CSS Code

.card {
    transform-origin: bottom center;
    transition: transform 0.5s ease;
}

.card:hover {
    transform: rotate(8deg);
}

Output

When the card is hovered, it rotates around its bottom-center point.

Explanation

  • transform-origin: bottom center sets the rotation point.
  • rotate(8deg) rotates the card.
  • transition creates a smoother effect.
  • Changing the origin can make the rotation appear more natural.

Key Takeaways

  • transform-origin controls the point around which a transformation occurs.
  • The default origin for typical 2D transforms is the center.
  • Keywords such as top, bottom, left, right, and center can define the origin.
  • Percentage values provide flexible positioning.
  • Pixel values provide precise positioning.
  • transform-origin works with transformations such as rotate(), scale(), skew(), and 3D transforms.
  • Changing the origin can create realistic hinge and pivot effects.
  • Combining transform-origin with transition can create smooth interactive effects.
  • It is useful for cards, buttons, menus, doors, panels, and animations.

Frequently Asked Questions (FAQs)

1. What is transform-origin in CSS?

transform-origin specifies the point around which an element is transformed.

Example:

.box {
    transform-origin: top left;
}

2. What is the default value of transform-origin?

For typical 2D transformations, the default origin is the center of the element, represented by 50% 50%.

3. How do I rotate an element around its left edge?

Use:

.box {
    transform-origin: left center;
    transform: rotate(30deg);
}

4. Can transform-origin use percentages?

Yes. For example:

.box {
    transform-origin: 25% 75%;
}

The first value controls the horizontal position and the second controls the vertical position.

5. Can I use pixels with transform-origin?

Yes.

.box {
    transform-origin: 20px 30px;
}

This allows precise positioning of the transformation point.

6. Does transform-origin work with scale()?

Yes. It changes the point from which the element scales.

.box {
    transform-origin: top left;
    transform: scale(1.5);
}

7. Can transform-origin be used with 3D transformations?

Yes. It can be combined with 3D transformations such as rotateX(), rotateY(), and rotateZ().

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

Related Posts

Scroll to Top