Loading Please Wait...
The CSS transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
In CSS The Visual Formatting Model describes how user agents take the document tree, and process and display it for visual media.
The translate method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
The translateX() method moves an element from its current position to the x-axis (positive value moves right, negative value moves left).
The translateY() method moves an element from its current position to the y-axis (positive value moves bottom, negative value moves top).
The translateZ() method moves an element from its current position to the z-axis (for 3d transformations).
The translate() method moves an element from its current position to the both x-axis and y-axis.
The translate3d() method moves an element from its current position to the all x-axis, y-axis and z-axis.
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
The rotate method rotates an element clockwise (positive value) or counter-clockwise according (negative value) to a given degree.
The rotateX() method rotates an element in x-axis.
The rotateY() method rotates an element in y-axis.
The rotateZ() method rotates an element in z-axis.
The rotate() method rotates an element in x-axis and y-axis.
The rotate3d() method rotates an element in x-axis, y-axis and z-axis.
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
The scale method increases (positive value) or decreases (negative value) the size of an element.
The scaleX() method change the size of an element in x-axis.
The scaleY() method change the size of an element in y-axis.
The scaleZ() method change the size of an element in z-axis.
The scale() method change the size of an element in x-axis and y-axis.
The scale3d() method change the size of an element in x-axis, y-axis and z-axis.
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
The skew method skews an element along the x-axis and y-axis by the given angles.
The skewX() method skews an element along the x-axis by the given angles.
The skewY() method skews an element along the y-axis by the given angles.
The skew() method skews an element along the x-axis and y-axis by the given angles.
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
The matrix method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
/* No transformation */
transform: none;
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved