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()
: Thematrix()
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 thematrix()
function to scale and skew an element:
.example {
transform: matrix(1.5, 0.2, 0.3, 1, 0, 0);
}
-
matrix3d()
: Thematrix3d()
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 thematrix3d()
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()
: Theperspective()
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 theperspective()
function to create a perspective effect on an element:
.example {
transform: perspective(500px) rotateY(45deg);
}
-
rotate()
: Therotate()
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 therotate()
function to rotate an element by 45 degrees:
.example {
transform: rotate(45deg);
}
-
rotate3d()
: Therotate3d()
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 therotate3d()
function to rotate an element around a fixed axis in 3D space:
.example {
transform: rotate3d(1,1,1,-45deg);
}
-
rotateX()
: TherotateX()
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 therotateX()
function to rotate an element around the horizontal axis:
.example {
transform: rotateX(45deg);
}
-
rotateY()
: TherotateY()
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 therotateY()
function to rotate an element around the vertical axis:
.example {
transform: rotateY(45deg);
}
-
rotateZ()
: TherotateZ()
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 therotateZ()
function to rotate an element around the z-axis:
.example {
transform: rotateZ(45deg);
}
-
scale()
: Thescale()
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 thescale()
function to increase the size of an element by a factor of two:
.example {
transform: scale(2);
}
-
scale3d()
: Thescale3d()
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 thescaleX()
function to scale an element horizontally:
.example {
transform: scaleX(2);
}
-
scaleY()
: ThescaleY()
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 thescaleY()
function to scale an element vertically:
.example {
transform: scaleY(2);
}
-
scaleZ()
: ThescaleZ()
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 thescaleZ()
function to scale an element along the z-axis:
.example {
transform: scaleZ(2);
}
-
skew()
: Theskew()
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 theskew()
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()
: TheskewX()
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 theskewX()
function to skew an element in the horizontal direction:
.example {
transform: skewX(30deg);
}
-
skewY()
: TheskewY()
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 theskewY()
function to skew an element in the vertical direction:
.example {
transform: skewY(30deg);
}
-
translate()
: Thetranslate()
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 thetranslate()
function to move an element 50 pixels to the right and 100 pixels down:
.example {
transform: translate(50px, 100px);
}
-
translate3d()
: Thetranslate3d()
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.
Top comments (0)