Understanding CSS Transforms – A Beginner's Guide

[Lomanu4]

Today, I learned about CSS Transforms, and I’m excited to share what I discovered!

What is CSS Transform?


The transform property in CSS lets you visually manipulate elements — you can move, rotate, scale, and skew them without changing the actual layout. It's super useful for animations, hover effects, and modern UI design.

2D Transform Functions


Here are some common 2D transform functions:

1. translate(x, y)


Moves an element from its original position.


transform: translate(50px, 100px);
2. rotate(angle)


Rotates an element clockwise.


transform: rotate(45deg);
3. scale(x, y)


Scales an element in the X and Y directions.


transform: scale(1.5, 1.5);
4. skew(x-angle, y-angle)


Skews the element.


transform: skew(20deg, 10deg);
3D Transform Functions


3D transforms add depth to your elements and make them appear to move in 3D space. To view them properly, you often need to use the perspective property on the parent container.

1. rotateX(angle)


Rotates the element around the X-axis.


transform: rotateX(45deg);
2. rotateY(angle)


Rotates the element around the Y-axis.


transform: rotateY(45deg);
3. rotateZ(angle)


Rotates the element around the Z-axis (similar to 2D rotate).


transform: rotateZ(45deg);
4. translateZ(distance)


Moves the element closer or farther away in 3D space.


transform: translateZ(50px);
5. perspective(n)


Defines the distance between the viewer and the 3D element.


.parent {
perspective: 500px;
}
Example: Hover Effect Using 2D Transform


<style>
.box {
width: 100px;
height: 100px;
background: teal;
transition: transform 0.3s;
}

.box:hover {
transform: scale(1.2) rotate(10deg);
}
</style>

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

When you hover over the box, it grows and rotates — all thanks to the transform property!

Final Thoughts


CSS transforms (2D and 3D) are powerful tools that add creativity and interaction to your web designs. I enjoyed experimenting with different effects and seeing how elements can move and rotate on screen.

Next, I’m planning to learn about CSS animations and how they work with transforms.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.