Transform translate Property in CSS
Transform Translate
The translate() method moves an element from its current position to the x-axis and y-axis. Positive values will push an element down and to the right of its default position, while negative values will pull an element up and to the left of its default position.
Transform Skew
The skew() method skews an element along the x-axis and the y-axis by the given angles.
Syntax:-
Its syntax is:-
< style >
element{
transform: skew(x-angle,y-angle)| skewX(angle)| skewY(angle)| translate3d(x,y,z)| translateX(x)| translateY(x)| translateZ(x);
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| none | Defines that there should be no transformation |
| matrix(n,n,n,n,n,n) | Defines 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) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate(x,y) | Defines a 2D translation |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a translation, using only the value for the X-axis |
| translateY(y) | Defines a translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale(x,y) | Defines a 2D scale transformation |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
