Transforms

Question 1

What is the transform CSS property used for?

Answer 1

The transform CSS property is used to modify the position, scale, and rotation of an element, either in 2D or 3D space.

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 2

What is the syntax and possible values for the transform CSS property?

Answer 2

The syntax for the transform CSS property is

transform: function(value);

Possible values include functions such as translate, scale, rotate, skew, and matrix, each with their respective values.

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 3

How can you apply multiple transforms to an element?

Answer 3

You can apply multiple transforms by chaining the functions together, separated by spaces, like this:

transform: function1(value) function2(value);

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 4

What are the common 1-dimensional transforms in CSS?

Answer 4

The common 1-dimensional transforms in CSS are translateX(), translateY(), scaleX(), scaleY(), and skewX(), skewY().

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 5

What are the main 3-dimensional transforms in CSS?

Answer 5

The main 3-dimensional transforms in CSS are translate3d(x, y, z), scale3d(x, y, z), rotateX(angle), rotateY(angle), rotateZ(angle), and matrix3d().

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 6

What are the main types of CSS transform functions?

Answer 6

The main types of CSS transforms are translation, scaling, rotation, skewing, and matrix transformations.

“transform - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 7

What does the translate() CSS transform function do?

Answer 7

The translation transform moves an element from its current position along the X, Y, or Z axis without affecting the layout of surrounding elements.

“translate() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 8

What are the syntaxes for translate() CSS transform functions?

Answer 8

The syntaxes for translation functions in CSS are: translate(tx, ty), translateX(tx), translateY(ty), and translate3d(tx, ty, z).

Values:

• tx - Is a <length> or <percentage> representing the abscissa of the translating vector.
• ty - Is a <length> or <percentage> representing the ordinate of the translating vector.
• tz - Is a <length> representing the z component of the translating vector. It can’t be a <percentage> value; in that case the property containing the transform is considered invalid.

“translate() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 4, 2023.

Question 9

What does the scale() CSS transform do?

Answer 9

The scaling transform resizes an element’s width and height by a specified factor without affecting the layout of surrounding elements.

“scale() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 5, 2023.

Question 10

What are the syntaxes for scale() CSS transform functions?

Answer 10

The syntaxes for scaling functions in CSS are: scale(sx, sy), scaleX(sx), scaleY(sy), and scale3d(sx, sy, sz).

Argument values

• sx - Is a <number> representing the abscissa of the scaling vector.
• sy - Is a <number> representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element’s aspect ratio.
• sz - Is a <number> representing the z-component of the scaling vector.

NOTE: scale, scaleX and scaleY also accepts <percentage> as argument values.

“scale() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 5, 2023.

Question 11

What does the rotate() CSS transform function do?

Answer 11

The rotation transform rotates an element around a specified axis without affecting the layout of surrounding elements.

“rotate() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 5, 2023.

Question 12

List all rotate CSS transform functions

Answer 12

rotate(angle), rotateX(angle), rotateY(angle), rotateZ(angle), and rotate3d(x, y, z, angle).

Question 13

What is the syntax of the rotate() CSS transform function?

Answer 13

rotate(angle);

Values

• angle - Is an <angle> representing the angle of the rotation. The direction of rotation depends on the writing direction. In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context, a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one.

“rotate() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 5, 2023.

Question 14

What does the skew() CSS transform function do?

Answer 14

The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type.

“skew() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 15

What is the syntax of the skew() CSS transform function?

Answer 15

Syntax

skew(ax)
skew(ax, ay)

Values

• ax - Is an <angle> representing the angle to use to distort the element along the x-axis (or abscissa).
• ay - Is an <angle> representing the angle to use to distort the element along the y-axis (or ordinate). If not defined, its default value is 0, resulting in a purely horizontal skewing.</angle>

“skew() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 16

What does the translate CSS property do?

Answer 16

The translate CSS property allows you to specify translation transforms individually and independently of the transform property.

This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.

“translate - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 17

What is the syntax of the translate CSS property?

Answer 17

Syntax

/* Keyword values */
translate: none;

/* Single values */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

Values

• Single <length-percentage> value - A <length> or <percentage> that specifies a translation along the X-axis. Equivalent to a translate() (2D translation) function with a single value specified.
• Two <length-percentage> values - Two <length> or <percentage> that specify the X and Y axis translation values (respectively) of a 2D translation. Equivalent to a translate() (2D translation) function with two values specified.
• Three values - Two <length-percentage> and single <length> values that specify the X, Y, and Z axis translation values (respectively) of a 3D translation. Equivalent to a translate3d() (3D translation) function.
• none - Specifies that no translation should be applied.

“translate - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 18

What does the rotate CSS property do?

Answer 18

The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property.

This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.

“rotate - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 19

What is the syntax of the rotate CSS property?

Answer 19

Syntax

/* Keyword values */
rotate: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/* Vector plus angle value */
rotate: 1 1 1 90deg;

Values

• angle value - An <angle> specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function.
• x, y, or z axis name plus angle value - The name of the axis you want to rotate the affected element around (“x”, “y”, or “z”), plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotateX()/rotateY()/rotateZ() (3D rotation) function.
• vector plus angle value - Three <number>s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotate3d() (3D rotation) function.
• none - Specifies that no rotation should be applied.

“rotate - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 22, 2023.

Question 20

What does the scale CSS property do?

Answer 20

The scale CSS property allows you to specify scale transforms individually and independently of the transform property.

This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.

“scale - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 23, 2023.

Question 21

What is the syntax of the scale CSS property?

Answer 21

Syntax

/* Keyword values */
scale: none;

/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;

/* Two values */
scale: 2 0.5;

/* Three values */
scale: 200% 50% 200%;

Values

• Single value - A <number> or <percentage> specifying a scale factor to make the affected element scale by the same factor along both the X and Y axes. Equivalent to a scale() (2D scaling) function with a single value specified.
• Two values - Two <number> or <percentage> values that specify the X and Y axis scaling values (respectively) of a 2D scale. Equivalent to a scale() (2D scaling) function with two values specified.
• Three values - Three <number> or <percentage> values that specify the X, Y, and Z axis scaling values (respectively) of a 3D scale. Equivalent to a scale3d() (3D scaling) function.
• none - Specifies that no scaling should be applied.

“scale - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 23, 2023.

Question 22

What does the transform-origin CSS property do?

Answer 22

The transform-origin CSS property sets the origin for an element’s transformations.

“transform-origin - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 23, 2023.

Question 23

What is the syntax of the transform-origin CSS property?

Answer 23

Syntax

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

The transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If a single <length> or <percentage> value is defined, it represents the horizontal offset.

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset.

Values

• x-offset - Is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set.
• offset-keyword - Is one of the left, right, top, bottom, or center keyword describing the corresponding offset.
• y-offset - Is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set.
• x-offset-keyword - Is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set.
• y-offset-keyword - Is one of the top, bottom, or center keyword describing how far from the top edge of the box the origin of the transform is set.
• z-offset - Is a <length> (and never a <percentage> which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

“transform-origin - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 23, 2023.

Question 24

What does the CSS transform: rotate(45deg); function do?

Answer 24

It rotates the element 45 degrees clockwise.

Question 25

Apply a CSS transform function that scales an element to twice its original size.

Answer 25

``` transform: scale(2); ```

Question 26

Which CSS transform function would you use to move an element 30 pixels to the right and 20 pixels down without disrupting the normal flow of the document?

Answer 26

``` transform: translate(30px, 20px); ```

Question 27

What does the CSS function `transform: skewX(20deg);` do to an element?

Answer 27

It skews the element 20 degrees along the X-axis.

Question 28

How would you combine multiple transform functions in a single declaration?

Answer 28

You can chain multiple functions together, like this: `transform: rotate(45deg) scale(2);`

Question 29

How to use CSS transform to rotate an element 45 degrees counter-clockwise?

Answer 29

``` transform: rotate(-45deg); ```

Question 30

Write a CSS rule that scales an element in the x-direction by 1.5 times and in the y-direction by 0.5 times.

Answer 30

``` transform: scaleX(1.5) scaleY(0.5); ```

Question 31

How to rotate an element around a fixed point (say `100px 100px`)?

Answer 31

Set the `transform-origin` property to `100px 100px` before applying the rotate function: ``` transform-origin: 100px 100px; transform: rotate(45deg); ```