transform property (Web Development Course Class 29)
Definition:
The transform property in CSS is used to visually change (transform) an element’s position, size, rotation, or shape without affecting the actual layout of the page.
Example:
div {
transform: rotate(20deg);
}This will rotate the element 20 degrees clockwise.
🔄 Rotate Function: (Web Development Course Class 29)
Definition:
The rotate() function turns (rotates) an element around a fixed point (usually the center). The value is given in degrees.
Example:
div {
transform: rotate(45deg);
}This rotates the element 45 degrees clockwise.
🧭 Skew Function: (Web Development Course Class 29)
Definition:
The skew() function slants (distorts) an element along the X or Y axis, making it look like it’s leaning to the side.
Example:
div {
transform: skew(20deg, 10deg);
}This skews the element 20 degrees on the X-axis and 10 degrees on the Y-axis.
📏 Scale Function: (Web Development Course Class 29)
Definition:
The scale() function resizes an element. It stretches or shrinks the element along the X and/or Y axis.
Example:
div {
transform: scale(1.5);
}This makes the element 1.5 times larger.
---
💡 *Student Tip:*
You can combine multiple transform functions like this:
```css
div {
transform: rotate(10deg) scale(1.2) skew(10deg, 5deg);
}
```
