CSS transform Property
CSS transform Property
CSS transform
property applies a 2D or 3D transformation to an element. This property lets you to rotate, scale, skew, or translate an element.
CSS translateX() Function
CSS translateX()
function repositions an element horizontally on the 2D plane.
Note: The translateX()
function is specified with one values.
Example
Syntax
Using CSS
Using Javascript
Animatable
Yes, transform property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS transform property is none.
Property Value
The following table provides a list of values for CSS transform
property.
Value | Explanation |
---|---|
none | Specifies that there should be no transformation. |
translateX(x) | Specifies a translation, using only the value for the X-axis. |
translateY(y) | Specifies a translation, using only the value for the Y-axis. |
translateZ(z) | Specifies a 3D translation, using only the value for the Z-axis. |
translate(x,y) | Specifies a 2D translation. |
translate3d(x,y,z) | Specifies a 3D translation. |
matrix(n,n,n,n,n,n) | Specifies a 2D transformation, using a matrix of six values. |
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Specifies a 3D transformation, using a 4x4 matrix of 16 values. |
scaleX(x) | Specifies a scale transformation by giving a value for the X-axis. |
scaleY(y) | Specifies a scale transformation by giving a value for the Y-axis. |
scaleZ(z) | Specifies a 3D scale transformation by giving a value for the Z-axis. |
scale(x,y) | Specifies a 2D scale transformation. |
scale3d(x,y,z) | Specifies a 3D scale transformation. |
rotateX(angle) | Specifies a 3D rotation along the X-axis. |
rotateY(angle) | Specifies a 3D rotation along the Y-axis. |
rotateZ(angle) | Specifies a 3D rotation along the Z-axis. |
rotate(angle) | Specifies a 2D rotation, the angle is specified in the parameter. |
rotate3d(x,y,z,angle) | Specifies a 3D rotation. |
skewX(angle) | Specifies a 2D skew transformation along the X-axis. |
skewY(angle) | Specifies a 2D skew transformation along the Y-axis. |
skew(x-angle,y-angle) | Specifies a 2D skew transformation along the X- and the Y-axis. |
perspective(n) | Specifies a perspective view for a 3D transformed element. |
CSS translateY() Function
CSS translateY()
function repositions an element vertically on the 2D plane.
Note: The translateY()
function is specified with one values.
Example
CSS translateZ() function
CSS translateZ()
function repositions an element along the z-axis in 3D space.
Note: The translateZ()
function is specified with one values.
Example
CSS translate() Function
CSS translate()
function repositions an element in the horizontal and/or vertical directions.
Note: The translate()
function is specified with two values.
Example
CSS translate3d() Function
CSS translate3d()
function repositions an element in 3D space.
Note: The translate3d()
function is specified with six values.
Example
matrix()
CSS matrix()
function defines a homogeneous 2D transformation matrix.
Note: The matrix()
function is specified with six values.
Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
Example
matrix3d()
CSS matrix3d()
function specifies a 3D transformation as a 4x4 homogeneous matrix.
Note: The matrix3d()
function is specified with 16 values. They are described in the column-major order.
Example
scaleX()
CSS scaleX()
function specifies a transformation that resizes an element along the x-axis (horizontally).
Note: The scaleX()
function is specified with one values.
Example
scaleY()
CSS scaleY()
function specifies a transformation that resizes an element along the y-axis (vertically).
Note: The scaleY()
function is specified with one values.
Example
scaleZ()
CSS scaleZ()
function specifies a transformation that resizes an element along the z-axis.
Note: The scaleZ()
function is specified with one values.
Example
scale()
CSS scale()
function specifies a transformation that resizes an element on the 2D plane.
Note: The scale()
function is specified with two values.
Example
scale3d()
CSS scale3d()
function specifies a transformation that resizes an element in 3D space.
Note: The scale3d()
function is specified with three values.
Example
rotateX()
CSS rotateX()
function specifies a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.
Note: The rotateX()
function is specified with one values.
Example
rotateY()
CSS rotateY()
function specifies a transformation that rotates an element around the ordinate (vertical axis) without deforming it.
Note: The rotateY()
function is specified with one values.
Example
rotateZ()
CSS rotateZ()
function specifies a transformation that rotates an element around the z-axis without deforming it.
Note: The rotateZ()
function is specified with one values.
Example
rotate()
CSS rotate()
function specifies a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.
Note: The rotate()
function is specified with one values.
Example
rotate3d()
CSS rotate3d()
function specifies a transformation that rotates an element around a fixed axis in 3D space, without deforming it.
Note: The rotate3d()
function is specified with four values (at maximum).
Example
skewX()
CSS skewX()
function specifies a transformation that skews an element in the horizontal direction on the 2D plane.
Note: The skewX()
function is specified with one values.
Example
skewY()
CSS skewY()
function specifies a transformation that skews an element in the vertical direction on the 2D plane.
Note: The skewY()
function is specified with one values.
Example
skew()
CSS skew()
function specifies a transformation that skews an element on the 2D plane.
Note: The skew()
function is specified with one or two values.
Example
perspective()
CSS perspective()
function specifies a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimenstional.
Note: The perspective()
function is specified with one values.
Example
Using JavaScript
In the following example, we will demonstrate how to change the CSS transform
property of an element using JavaScript.
Example
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.