Loading lesson path
Overview
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
transform property you can use the following 2D transformation functions: translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix()
The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
Formula
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);
}Formula
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);
}Formula
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);
}The following table lists all the 2D transform properties:
Formula
Applies a 2D or 3D transformation to an element transform - originAllows you to change the position on transformed elements
Defines a 2D transformation, using a matrix of six values translate()
Formula
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()
Formula
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