css-transforms

Question 1

What does the transform property do?

Answer 1

The transform CSS property lets you rotate, scale, skew, or translate an element

Question 2

Give four examples of CSS transform functions.

Answer 2

scale(), rotate(), skew(), translate()

1. scale() - scales an element by a specified factor in the x and y dimensions. For example, transform: scale(2) will double the size of an element.
2. rotate() - rotates an element around a specified point by a specified number of degrees. For example, transform: rotate(45deg) will rotate an element 45 degrees clockwise.
3. skew() - skews an element along the x and y axes by a specified number of degrees. For example, transform: skew(10deg, 20deg) will skew an element 10 degrees along the x axis and 20 degrees along the y axis.
4. translate() - moves an element by a specified distance along the x and y axes. For example, transform: translate(50px, 100px) will move an element 50 pixels to the right and 100 pixels down.