Contents
An introduction to transform and translate
CSS transform is a powerful tranformation property. By using its various functions, you can scale, rotate, skew, or translate HTML elements. One of the most commonly used functions is CSS translate which allows you to move elements.
Using translate
CSS translate moves an element up and down or side-to-side:
- By indicating one value, you move the element to the right side. Negative values move elements to the left.
- The second value moves the element down. Negative values move elements up.
This example moves the element to the right and down by indicating two values in the transform: translate() CSS declaration:
div {
width: 80px;
height: 80px;
background-color: green;
}
.example1 {
background-color: purple;
color: white;
border-radius: 5px;
transform: translate(20px, 50px);
}translateX and translateY
The CSS translateY and translateX properties are a bit more specific. The elements move along either the horizontal or vertical axis.
The following example shows the use of CSS translateY:
div {
width: 80px;
height: 80px;
background-color: green;
}
.example1 {
transform: translateY(130px);
background-color: purple;
}Creating 3D space
CSS 3D transforms happen when you apply a function that positions an element along the Z axis – e.g., the CSS translate3d method.
CSS translate3d or the translateZ function moves the element to 3D space. Positive values position elements closer to the viewer, while negative values move elements away (similar to zooming in and out):
div {
width: 100px;
height: 100px;
background-color: green;
}
.example1 {
transform: perspective(500px) translate3d(50px, 10px, 3px);
background-color: pink;
}