CSS TRANSFORM

The CSS transform property allows you to apply geometric transformations to an element, such as rotating, scaling, skewing, or translating it. Here is a list of all the CSS transform functions along with examples:

• matrix(): The matrix() function describes a homogeneous 2D transformation matrix. It takes six values, representing the elements of a 2x3 matrix. Here is an example that shows how to use the matrix() function to scale and skew an element:

.example {
  transform: matrix(1.5, 0.2, 0.3, 1, 0, 0);
}

• matrix3d(): The matrix3d() function describes a 3D transformation as a 4x4 homogeneous matrix. It takes sixteen values, representing the elements of a 4x4 matrix. Here is an example that shows how to use the matrix3d() function to rotate and scale an element in 3D space:

.example {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, -100, 1);
}

• perspective(): The perspective() function sets the distance between the user and the z=0 plane. It takes one value, representing the distance in pixels. Here is an example that shows how to use the perspective() function to create a perspective effect on an element:

.example {
    transform: perspective(500px) rotateY(45deg);
}

• rotate(): The rotate() function rotates an element around a fixed point on the 2D plane. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotate() function to rotate an element by 45 degrees:

.example {
    transform: rotate(45deg);
}

• rotate3d(): The rotate3d() function rotates an element around a fixed axis in 3D space. It takes four values: the x-, y-, and z-coordinates of the axis of rotation followed by the angle of rotation in degrees or radians. Here is an example that shows how to use the rotate3d() function to rotate an element around a fixed axis in 3D space:

.example {
    transform: rotate3d(1,1,1,-45deg);
}

• rotateX(): The rotateX() function rotates an element around the horizontal axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateX() function to rotate an element around the horizontal axis:

.example {
    transform: rotateX(45deg);
}

• rotateY(): The rotateY() function rotates an element around the vertical axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateY() function to rotate an element around the vertical axis:

.example {
    transform: rotateY(45deg);
}

• rotateZ(): The rotateZ() function rotates an element around the z-axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateZ() function to rotate an element around the z-axis:

.example {
    transform: rotateZ(45deg);
}

• scale(): The scale() function scales an element up or down on the 2D plane. It takes one or two values: if one value is provided, it specifies a uniform scaling factor for both dimensions; if two values are provided, they specify separate scaling factors for the x- and y-dimensions respectively. Here is an example that shows how to use the scale() function to increase the size of an element by a factor of two:

.example {
    transform: scale(2);
}

• scale3d(): The scale3d() function scales an element up or down in 3D space. It takes three values: separate scaling factors for each dimension (x-, y-, and z-dimensions). Here is an example that shows how to use the <EUGPSCoordinates> function to scale an element in all three dimensions:

.example {
    transform: scale3d(2,.5,.5);
}

• scaleX(): The <EUGPSCoordinates> function scales an element up or down horizontally (along its x-axis). It takes one value: a scaling factor for its x-dimension. Here is an example that shows how to use the scaleX() function to scale an element horizontally:

.example {
    transform: scaleX(2);
}

• scaleY(): The scaleY() function scales an element up or down vertically (along its y-axis). It takes one value: a scaling factor for its y-dimension. Here is an example that shows how to use the scaleY() function to scale an element vertically:

.example {
    transform: scaleY(2);
}

• scaleZ(): The scaleZ() function scales an element up or down along the z-axis. It takes one value: a scaling factor for its z-dimension. Here is an example that shows how to use the scaleZ() function to scale an element along the z-axis:

.example {
    transform: scaleZ(2);
}

• skew(): The skew() function skews an element on the 2D plane. It takes one or two values: if one value is provided, it specifies a skew along the x-axis; if two values are provided, they specify separate skews along the x- and y-axes respectively. Here is an example that shows how to use the skew() function to skew an element by 30 degrees along the X-axis and 20 degrees along the Y-axis:

.example {
    transform: skew(30deg, 20deg);
}

• skewX(): The skewX() function skews an element in the horizontal direction (along its x-axis). It takes one value, representing the angle of skew in degrees or radians. Here is an example that shows how to use the skewX() function to skew an element in the horizontal direction:

.example {
    transform: skewX(30deg);
}

• skewY(): The skewY() function skews an element in the vertical direction (along its y-axis). It takes one value, representing the angle of skew in degrees or radians. Here is an example that shows how to use the skewY() function to skew an element in the vertical direction:

.example {
    transform: skewY(30deg);
}

• translate(): The translate() function moves an element on the 2D plane. It takes one or two values: if one value is provided, it specifies a translation along the x-axis; if two values are provided, they specify separate translations along the x- and y-axes respectively. Here is an example that shows how to use the translate() function to move an element 50 pixels to the right and 100 pixels down:

.example {
    transform: translate(50px, 100px);
}

• translate3d(): The translate3d() function moves an element in 3D space. It takes three values: separate translations for each dimension (x-, y-, and z-dimensions). Here is an example that shows how to use the <EUGPSCoordinates> function to move an element in all three dimensions:

.example {
    transform: translate3d(50px,100px,10px);
}

• translateX(): The <EUGPSCoordinates> function moves an element horizontally (along its x-axis). It takes one value: a translation for its x-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element horizontally:

.example {
    transform: translateX(50px);
}

• translateY(): The <EUGPSCoordinates> function moves an element vertically (along its y-axis). It takes one value: a translation for its y-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element vertically:

.example {
    transform: translateY(100px);
}

• translateZ(): The <EUGPSCoordinates> function moves an element along the z-axis. It takes one value: a translation for its z-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element along the z-axis:

.example {
    transform: translateZ(10px);
}

These examples demonstrate how you can use each of these CSS transform functions to apply geometric transformations to elements on your web pages.

(1) transform - CSS: Cascading Style Sheets | MDN - MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/transform.
(2) - CSS: Cascading Style Sheets | MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function.
(3) CSS Functions - Quackit Tutorials. https://www.quackit.com/css/functions/.
(4) CSS Transitions and Transforms for Beginners - thoughtbot. https://thoughtbot.com/blog/transitions-and-transforms.