CSS 2D transformations allow you to manipulate the position, size, and shape of an element in a two-dimensional space. These transformations are achieved using the transform property and its various functions, which modify the coordinate space of the element without affecting the normal document flow. This enables engaging and interactive effects on your web page.
translate()
The translate() function repositions an element horizontally and/or vertically from its current location. It takes one or two values, representing the translation along the X and Y axes, respectively.
Example 1: Horizontal Translation
/* style.css */
.box-translate-x {
/* Moves the element 50 pixels to the right */
transform: translate(50px);
}
Explanation This code uses translate(50px) to move the element with the class .box-translate-x 50 pixels along the positive X-axis (to the right). If only one value is provided, it is applied to the X-axis.
Example 2: Vertical and Horizontal Translation
/* style.css */
.box-translate-xy {
/* Moves the element 100px right and 25px down */
transform: translate(100px, 25px);
}
Explanation Here, translate(100px, 25px) shifts the element 100 pixels to the right (X-axis) and 25 pixels down (Y-axis). The first value corresponds to horizontal movement, and the second to vertical.
Example 3: Using Percentages for Translation
/* style.css */
.box-translate-percent {
/* Moves the element 50% of its own width to the right */
/* and 25% of its own height up */
transform: translate(50%, -25%);
}
Explanation This example demonstrates using percentages. The element is moved to the right by 50% of its own width and up by 25% of its own height, as indicated by the negative value.
Example 4: Using the translateX() Function
/* style.css */
.box-translateX-only {
/* A specific function to move the element 75 pixels left */
transform: translateX(-75px);
}
Explanation The translateX() function is a shorthand for moving an element only along the horizontal axis. A negative value moves the element to the left.
Example 5: Using the translateY() Function
/* style.css */
.box-translateY-only {
/* A specific function to move the element 40 pixels down */
transform: translateY(40px);
}
Explanation Similarly, translateY() is a shorthand for moving an element only along the vertical axis. A positive value shifts the element downwards.
rotate()
The rotate() function turns an element around a fixed point, known as the transform-origin, without deforming it. It accepts a value in degrees (deg), radians (rad), gradians (grad), or turns.
Example 1: Rotating an Element in Degrees
/* style.css */
.box-rotate {
/* Rotates the element 45 degrees clockwise */
transform: rotate(45deg);
}
Explanation This code rotates the element with the class .box-rotate by 45 degrees clockwise around its center. The transform-origin defaults to the center of the element.
Example 2: Negative Rotation
/* style.css */
.box-rotate-negative {
/* Rotates the element 90 degrees counter-clockwise */
transform: rotate(-90deg);
}
Explanation A negative value rotates the element in the opposite direction. Here, rotate(-90deg) turns the element 90 degrees counter-clockwise.
Example 3: Using 'turn' Units
/* style.css */
.box-rotate-turn {
/* Rotates the element a quarter turn clockwise */
transform: rotate(0.25turn);
}
Explanation The turn unit is a convenient way to express rotation, where 1turn is equivalent to a full 360-degree rotation. Therefore, 0.25turn is the same as a 90-degree clockwise rotation.
Example 4: Changing the Transform Origin
/* style.css */
.box-rotate-origin {
/* Sets the rotation point to the top-left corner */
transform-origin: top left;
/* Rotates the element 20 degrees clockwise from its top-left corner */
transform: rotate(20deg);
}
Explanation The transform-origin property changes the point around which the rotation occurs. In this case, the element rotates around its top-left corner instead of its center.
Example 5: Rotation on Hover
/* style.css */
.box-rotate-hover {
transition: transform 0.5s ease;
}
.box-rotate-hover:hover {
/* Rotates the element 180 degrees on hover */
transform: rotate(180deg);
}
Explanation This example combines rotate() with a transition to create a smooth animation. When the user hovers over the element, it will smoothly rotate 180 degrees over half a second.
scale()
The scale() function resizes an element, making it larger or smaller. It can take one or two unitless number values, where 1 is the original size, values greater than 1 increase the size, and values between 0 and 1 decrease it.
Example 1: Uniform Scaling
/* style.css */
.box-scale {
/* Doubles the size of the element both horizontally and vertically */
transform: scale(2);
}
Explanation When one value is provided to scale(), the element is scaled uniformly in both width and height. This code makes the element twice its original size.
Example 2: Non-Uniform Scaling
/* style.css */
.box-scale-xy {
/* Makes the element 1.5 times wider and half its original height */
transform: scale(1.5, 0.5);
}
Explanation Providing two values allows for non-uniform scaling. The first value scales the width (X-axis), and the second scales the height (Y-axis).
Example 3: Scaling Down
/* style.css */
.box-scale-down {
/* Reduces the element's size by 20% */
transform: scale(0.8);
}
Explanation Using a value less than 1 shrinks the element. Here, scale(0.8) reduces the element's width and height to 80% of their original dimensions.
Example 4: Using scaleX()
/* style.css */
.box-scaleX {
/* Doubles the width of the element, height remains unchanged */
transform: scaleX(2);
}
Explanation The scaleX() function is a shorthand for scaling only the width of an element. The element's height is not affected by this transformation.
Example 5: Using scaleY()
/* style.css */
.box-scaleY {
/* Triples the height of the element, width remains unchanged */
transform: scaleY(3);
}
Explanation Similarly, scaleY() is a shorthand that only affects the height of the element. The element's width will remain its original size.
skew()
The skew() function distorts an element by a certain angle along the X and/or Y axes, turning a rectangle into a parallelogram. It takes one or two angle values.
Example 1: Skewing Along the X-axis
/* style.css */
.box-skew-x {
/* Skews the element by 20 degrees along the horizontal axis */
transform: skew(20deg);
}
Explanation Providing a single value to skew() applies the distortion along the X-axis. This makes the element appear as if it's being sheared horizontally.
Example 2: Skewing Along Both Axes
/* style.css */
.box-skew-xy {
/* Skews the element by -10 degrees horizontally and 20 degrees vertically */
transform: skew(-10deg, 20deg);
}
Explanation Using two values, you can skew an element along both the X and Y axes simultaneously. Negative values skew in the opposite direction.
Example 3: Using skewX()
/* style.css */
.box-skewX-only {
/* A specific function to skew the element by 30 degrees horizontally */
transform: skewX(30deg);
}
Explanation The skewX() function is a dedicated function for applying a skew transformation only along the horizontal (X) axis.
Example 4: Using skewY()
/* style.css */
.box-skewY-only {
/* A specific function to skew the element by 15 degrees vertically */
transform: skewY(15deg);
}
Explanation The skewY() function provides a way to apply a skew transformation exclusively along the vertical (Y) axis.
Example 5: Combining Skew with Hover
/* style.css */
.box-skew-hover {
transition: transform 0.4s ease-in-out;
}
.box-skew-hover:hover {
/* Skews the element on hover */
transform: skew(-15deg);
}
Explanation This example creates an interactive effect. When a user hovers over the element, it smoothly skews -15 degrees along the X-axis, returning to its original state when the hover ends.