CSS Transform Methods Flashcards
What does the rotate() method do?
The rotate() method rotates an element clockwise or counterclockwise by a specified degree. For example, rotate(45deg) rotates the element 45 degrees clockwise.
How does the translate() method work?
The translate() method moves an element from its current position along the X-axis and Y-axis. For example, translate(50px, 100px) moves the element 50 pixels horizontally and 100 pixels vertically.
What is the scale() method used for?
The scale() method changes the size of an element, scaling it up or down. For example, scale(1.5) increases the element’s size by 1.5 times, and scale(0.5) decreases its size by half.
How does the scaleX() and scaleY() methods differ from scale()?
The scaleX() method changes the width of an element, while the scaleY() method changes the height. For example, scaleX(2) doubles the width of the element, and scaleY(0.5) reduces its height by half.
What is the skew() method used for?
The skew() method skews or distorts an element along the X-axis and Y-axis. For example, skew(20deg, 10deg) skews the element by 20 degrees along the X-axis and 10 degrees along the Y-axis.
What do the skewX() and skewY() methods do?
The skewX() method skews an element along the X-axis by a given angle, while the skewY() method skews an element along the Y-axis. For example, skewX(30deg) skews the element by 30 degrees along the X-axis.
What is the matrix() method in CSS?
The matrix() method combines all the 2D transform methods (rotate, scale, skew, and translate) into one function. It takes six parameters that represent scale, skew, and translation values. For example, matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) applies all these transformations at once.
