CSS 2D Transforms
CSS 2D Transforms
CSS transformations allow you to move, turn, change size, and tilt elements on a webpage.
Move your mouse over the object below to see a 2D change happening:
In this section, we'll acquaint you with the following CSS property:
CSS 2D Transforms Methods
You can use CSS transform to apply these 2D transformation techniques:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tip: You will learn about 3D transformations in the next chapter.
The translate() Method
The translate() method moves an element from where it is now by telling it how far to go left or right (X-axis) and up or down (Y-axis).
In this example, the <div> element is shifted to the right by 50 pixels and moved downward by 100 pixels from its current location.
The rotate() Method
The CSS rotate() function spins an element in either a clockwise or counter-clockwise direction by a certain number of degrees.
This example shows how to make a <div> element turn 20 degrees clockwise.
To rotate the element counter-clockwise, you can use negative values.
The given code example makes a <div> element rotate 20 degrees in a counter-clockwise direction.
The scale() Method
The scale() method changes the size of an element by adjusting its width and height parameters.
The code below enlarges the <div> section to twice its initial width and three times its original height:
The example below reduces the size of the <div> element to half of its original width and height:
The scaleX() Method
The scaleX() function adjusts the width of an element, making it either larger or smaller.
The given illustration enlarges the <div> element to twice its original width.
The scaleY() Method
The scaleY() function adjusts the height of an element, making it larger or smaller.
To make the <div> element three times taller than its original height, refer to the following example:
This example reduces the height of the <div> element to half of its original size:
The skewX() Method
The skewX() function tilts an element horizontally based on the specified angle along the X-axis.
This example tilts the <div> element by 20 degrees along the X-axis:
The skewY() Method
The skewY() function tilts an element vertically by a specified angle along the Y-axis.
This example tilts the <div> element by 20 degrees along the Y-axis:
The skew() Method
The skew() method tilts an element horizontally and vertically based on specified angles along the X and Y-axis.
The given code distorts the <div> element by 20 degrees horizontally (X-axis) and 10 degrees vertically (Y-axis).
If you don't provide a second value, it defaults to zero. In this example, the <div> element is tilted 20 degrees on the X-axis:
The matrix() Method
The matrix() method puts together all the 2D transform methods into a single one.
The matrix() method uses six mathematical functions as parameters. It helps you rotate, scale, move (translate), and skew elements on a webpage.
Here are the parameters: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
CSS Transform Properties
The table below shows the properties used for 2D transformations:
| Property |
Description |
| transform |
Applies a change in position or appearance to an element, either in two dimensions (2D) or three dimensions (3D). |
| transform-origin |
Enables you to adjust the placement of transformed elements. |
CSS 2D Transform Methods
| Function |
Description |
| matrix(n,n,n,n,n,n) |
Describes a 2D change using a set of six values in a matrix. |
| translate(x,y) |
Describes a movement in two dimensions, shifting the element horizontally (X-axis) and vertically (Y-axis). |
| translateX(n) |
Describes a 2D shift that moves the element horizontally on the screen. |
| translateY(n) |
Describes a movement of an element in a 2D space, specifically shifting it vertically along the Y-axis. |
| scale(x,y) |
Describes a transformation that resizes elements in two dimensions by adjusting their width and height. |
| scaleX(n) |
Describes a transformation that adjusts the width of an element using a 2D scale. |
| scaleY(n) |
Describes a transformation that adjusts the height of an element using a 2D scaling effect. |
| rotate(angle) |
Specifies a rotation in two dimensions, with the angle provided as a parameter. |
| skew(x-angle,y-angle) |
Describes a tilt in a two-dimensional space along the horizontal (X-axis) and vertical (Y-axis) directions. |
| skewX(angle) |
Describes a tilt in two dimensions along the horizontal axis (X-axis). |
| skewY(angle) |
Specifies a tilt change in a two-dimensional manner along the vertical axis (Y-axis). |
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>The translate() Method</h1>
<p>The translate() method shifts an element from its current location.</p>
<div> This box is shifted 50 pixels to the right and 100 pixels down from where it was before. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() function turns an element either to the right or left.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is rotated clockwise 20 degrees. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(-20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is rotated counter-clockwise with 20 degrees. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2, 3);
}
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>
<div> This div element is two times of its original width, and three times of its original height. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>
<div> This div element is decreased to be half of its original width and height. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(2);
}
</style>
</head>
<body>
<h1>The scaleX() Method</h1>
<p>The scaleX() method increases or decreases the width of an element.</p>
<div> This div element is two times of its original width. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(0.5);
}
</style>
</head>
<body>
<h1>The scaleX() Method</h1>
<p>The scaleX() method increases or decreases the width of an element.</p>
<div> This div element is half of its original width. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(3);
}
</style>
</head>
<body>
<h1>The scaleY() Method</h1>
<p>The scaleY() method increases or decreases the height of an element.</p>
<div> This div element is three times of its original height. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(0.5);
}
</style>
</head>
<body>
<h1>The scaleY() Method</h1>
<p>The scaleY() method increases or decreases the height of an element.</p>
<div> This div element is half of its original height. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>
<h1>The skewX() Method</h1>
<p>The skewX() method skews an element along the X-axis by the given angle.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is skewed 20 degrees along the X-axis. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skewY(20deg);
}
</style>
</head>
<body>
<h1>The skewY() Method</h1>
<p>The skewY() method skews an element along the Y-axis by the given angle.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is skewed 20 degrees along the Y-axis. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>
<div> This a normal div element. </div>
<div id="myDiv"> This div element is skewed 20 degrees along the X-axis. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<h1>The matrix() Method</h1>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div> This a normal div element. </div>
<div id="myDiv1"> Using the matrix() method. </div>
<div id="myDiv2"> Another use of the matrix() method. </div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL