CSS 2D Transforms
Moving, rotating, scaling and skewing an element all go through one CSS property, transform, which handles transformations in either 2D or 3D.
CSS 2D Transforms Functions
For work in two dimensions, transform accepts these functions:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
The CSS translate() Function
Give translate() one value for the X-axis and one for the Y-axis, and the element shifts away from where it currently sits by those amounts.
Example
The <div> here ends up 100 pixels lower and 50 pixels further right than its starting point.
transform: translate(50px, 100px) to move it 50 pixels right and 100 pixels down from its original position. Show a border or background color so the movement is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS translate()</title>
<style>
div.moved {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>The translate() Function</h1>
<p>The translate() function moves an element from its current position:</p>
<div class="moved">
This div is moved 50px to the right and 100px down.
</div>
</body>
</html>
The CSS rotate() Function
To turn an element, pass rotate() a number of degrees. The direction can be either clockwise or counter-clockwise.
Rotate clockwise
A 20-degree clockwise turn is applied to the <div> below.
transform: rotate(20deg) to rotate it 20 degrees clockwise. Give the div a background color and some padding so the rotation is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Clockwise</title>
<style>
div.rotated {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 50px;
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Function</h1>
<p>The rotate() function rotates an element clockwise:</p>
<div class="rotated">
This div is rotated clockwise 20 degrees.
</div>
</body>
</html>
Rotate counter-clockwise
Turning the other way only takes a negative value. Below, the same <div> goes 20 degrees counter-clockwise.
transform: rotate(-20deg) to rotate it 20 degrees counter-clockwise. Give the div a background color and some padding so the rotation is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Counter-clockwise</title>
<style>
div.rotated {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 50px;
transform: rotate(-20deg);
}
</style>
</head>
<body>
<h1>The rotate() Function</h1>
<p>Using negative values rotates the element counter-clockwise:</p>
<div class="rotated">
This div is rotated counter-clockwise 20 degrees.
</div>
</body>
</html>
CSS Transform Properties
Every property available for 2D transforms appears in this table.
Transform properties table
<table>
<tr><th>Property</th><th>Description</th></tr>
<tr><td>transform</td><td>Applies a 2D or 3D transformation to an element</td></tr>
<tr><td>transform-origin</td><td>Allows you to change the position on transformed elements</td></tr>
</table>