The transform property in CSS is used to change or distort the shape or position of an element on the page. Moving or animating elements on screen required JavaScript, but nowadays, CSS can handle many motion requirements using transitions and transforms. Developers have unparalleled flexibility over many aspects of an element’s look because to the transform property, which enables components to be offset, rotated, scaled, and skewed in a variety of different ways.
How many transform properties are in CSS?
Transform property Values consists of one or more transform functions, separated by spaces. These functions define how an element should be transformed. Transforms are most commonly used in combination with transitions or animations.
- translate()
- scale()
- rotate()
- skew()
- matrix()
An important characteristic of transformed elements is that they do not affect the normal document flow. The original, pre-transformation element retains its place in the document flow, meaning subsequent elements are affected by its original position, margin, and padding. The transformed element itself sits in a new layer above the rest of the page and does not alter the layout of other elements; this means the transformed element can cover subsequent elements.
2D transform functions used with the transform property
translate()
This function moves an element on the screen. It allows to move elements left, right, up, or down.
- It can take one or two values: translate(translateX, translateY). If you provide only one value, it applies to the X axis.
- You can also use translateX(value) and translateY(value) to move the element along only the X or Y axis, respectively.
- Values can be lengths, units, or percentages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid and Flexbox Example</title>
<style>
body {
margin: 0;
font-family: sans-serif;
min-height: 100vh; /* Make body minimum full height for footer placement */
display: grid; /* Use Grid for the main page layout */
/* Define rows: Header, main content (takes remaining space), Footer */
grid-template-rows: auto 1fr auto; /* auto size header/footer, 1fr for main */
grid-template-columns: 1fr; /* Single column layout */
gap: 1em; /* Gap between grid areas */
}
.translate:hover { transform: translate(-20px, -20px); }
main {
/* Main content takes the middle row */
grid-column: 1;
grid-row: 2;
background-color: #e0f7df;
padding: 1em;
}
</style>
</head>
<body>
<main class="main">
<h1 class="translate">Main Content Area</h1>
<p>This area contains the primary content of the page. It takes up the flexible space provided by the Grid layout.</p>
<p>Flexbox and Grid work together to build complex layouts.</p>
</main>
</body>
</html>The effect moves the element 20px left and 20px up when hovered.
transform: translateY(0.1em);This shifts the element down by 0.1em.
Moving elements with translate is generally considered more performant than using position: absolute with top and left.
scale()
You can use this function to make an element larger or smaller.
- It can take one or two values: scale (scaleX, scaleY).
- When the scale() shorthand receives only one value, it assumes the other value to be identical.
- Values above 1 will enlarge the element, while values below 1 (but greater than 0) will shrink it.
- You can also use scaleX(value) and scaleY(value) to modify the size along only the X or Y axis.
- Using a negative value for scale() (e.g., scale(-1)) has the effect of flipping the element.
Example:
.scale:hover { transform: scale(1.4); }The effect scales the element to 1.4 times its original size when hovered.
transform: scale(0.5);The procedure shrinks the element to half its size.
rotate()
This function rotates an element around a set point.
- The value is an angle. The angle can be expressed in degrees (deg), gradians (grad), radians (rad), or turns (turn). Degrees are commonly used.
- Positive angle values rotate the element clockwise, while negative values rotate it counter-clockwise.
Example:
.rotate:hover { transform: rotate(30deg); }This rotates the element 30 degrees clockwise when hovered.
h2 { transform: rotate(-25deg); }This rotates an h2 element by -25 degrees.
skew()
This function distorts the shape of an element by “shear mapping” or “transvection”.
- It takes one or two angle values, representing the angle of distortion along the X and Y axes.
- You can also use skewX(angle) and skewY(angle) to skew along only the X or Y axis.
Example:
h2.transform-3 { transform: skew (-45deg,5deg); }This skews the element by -45 degrees on the x-axis and 5 degrees on the y-axis.
What is transform matrix in CSS?
matrix() This function allows for complex 2D transformations using a transformation matrix. It can be used to replicate other transforms like scaling, translating, or rotating. The matrix function accepts six values. By combining them.
Syntax: E { transform: matrix(a,b,c,d,X,Y); }
Example:
h2.transform-1 { transform: matrix(1,0,0,-1,0,-24); }
h2.transform-2 { transform: matrix(1,0,1,1,18,-24); }
h2.transform-3 { transform: matrix(0.98,-0.17,0.17,0.98,0,0); }Transforms shorthand property
You can apply multiple transformations to a single element by simply listing the transform functions, space-separated, as the value for the transform property.
Example:
h2 { transform: rotate(-40deg) scale(0.75) translate(-46%,-400%); }This code rotates the element, scales it, and then translates it.
CSS3 Topics