March 1Mar 1 Administrators CSS 2D Transforms CSS 2D Transforms The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. Mouse over the element below to see a 2D transformation: 2D rotate CSS 2D Transforms Functions With the CSS transform property you can use the following 2D transformation functions: translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix() The CSS translate() Function The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position: Example div { transform: translate(50px, 100px); } Try it Yourself » The CSS rotate() Function The rotate() function rotates an element clockwise or counter-clockwise according to a given degree. The following example rotates the <div> element clockwise with 20 degrees: Example div { transform: rotate(20deg); } Try it Yourself » Using negative values will rotate the element counter-clockwise. The following example rotates the <div> element counter-clockwise with 20 degrees: Example div { transform: rotate(-20deg); } Try it Yourself » Transform Subpages Continue learning about CSS 2D transforms: Scale Functions - scale(), scaleX(), scaleY() Skew and Matrix - skew(), skewX(), skewY(), matrix() CSS Transform Properties The following table lists all the 2D transform properties: Property Description transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements CSS 2D Transform Functions Function Description matrix() Defines a 2D transformation, using a matrix of six values translate() Defines a 2D translation, moving the element along the X- and the Y-axis translateX() Defines a 2D translation, moving the element along the X-axis translateY() Defines a 2D translation, moving the element along the Y-axis scale() Defines a 2D scale transformation, scaling the elements width and height scaleX() Defines a 2D scale transformation, scaling the element's width scaleY() Defines a 2D scale transformation, scaling the element's height rotate() Defines a 2D rotation, the angle is specified in the parameter skew() Defines a 2D skew transformation along the X- and the Y-axis skewX() Defines a 2D skew transformation along the X-axis skewY() Defines a 2D skew transformation along the Y-axis ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.