Page 31 - CSS

Function/Parameter Details

Vertical shear mapping distorting each point of an element by a
skewY(y)
certain angle in the vertical direction

matrix() Defines a 2D transformation in the form of a transformation matrix.

The angle by which the element should be rotated or skewed
(depending on the function with which it is used). Angle can be
angle provided in degrees (deg), gradians (grad), radians (rad) or turns (turn
). In skew() function, the second angle is optional. If not provided,
there will be no (0) skew in Y-axis.

The distance expressed as a length or a percentage by which the
element should be translated. In translate() function, the second
length-or-percentage
length-or-percentage is optional. If not provided, then there would be
no (0) translation in Y-axis.

A number which defines how many times the element should be
scaled in the specified axis. In scale() function, the second scale-
scale-factor
factor is optional. If not provided, the first scale-factor will be applied
for Y-axis also.

Remarks

2D Coordiante system

Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left
and the Y axis goes downwards as shown in the following image:

So a positive translateY() goes downwards and a positive translateX() goes right.

https://riptutorial.com/ 9