CSS3 introduces the transform property, which enables users to move, rotate, resize, and distort elements.
Transformation is a technique employed to alter the form, dimensions, and location.
There are two categories of transformation available in CSS3, namely 2D and 3D transformations.
CSS 2D Transforms
The CSS 2D transformations are employed to modify the arrangement of the element through actions like translating, rotating, scaling, and skewing, among others.
Following is a list of 2D transforms methods:
- translate(x,y): It is used to transform the element along X-axis and Y-axis.
- translateX(n): It is used to transform the element along X-axis.
- translateY(n): It is used to transform the element along Y-axis.
- rotate: It is used to rotate the element on the basis of an angle.
- scale(x,y): It is used to change the width and height of an element.
- scaleX(n): It is used to change the width of an element.
- scaleY(n): It is used to change the height of an element.
- skewX: It specifies the skew transforms along with X-axis.
- skewY: It specifies the skew transforms along with Y-axis.
- matrix: It specifies matrix transforms.
Supporting browsers
| Property | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| transform | 36.04.0 -webkit- | 10.09.0 -ms- | 16.03.5 -moz- | 23.015.0 -webkit-12.110.5 -o- | 9.03.2 -webkit- |
| transform-origin(two-value syntax) | 36.04.0 -webkit- | 10.09.0 -ms- | 16.03.5 -moz- | 9.03.2 -webkit- | 23.015.0 -webkit-12.110.5 -o- |
The translate method
The CSS translate function is employed to shift an element away from its existing placement based on the specified parameters, such as the X-axis and Y-axis.
Let's take an example to translate a
See this example:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
div {
width: 300px;
height: 100px;
background-color: lightgreen;
border: 1px solid black;
-ms-transform: translate(100px,80px); /* IE 9 */
-webkit-transform: translate(100px,80px); /* Safari */
transform: translate(100px,80px); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is translated 50 pixels right, and 100 pixels down from its current position by using translate () method.
</div>
</body>
</html>
The rotate method
The CSS rotate function is utilized to rotate an element either clockwise or counterclockwise based on the specified angle.
Let's take an example to rotate a
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This is the 30 degree clockwise rotated div element by using rotate() method.
</div>
</body>
</html>
The scale method
The CSS scale function is utilized to enlarge or reduce the dimensions of an element based on specified width and height values.
Let's take an example to increase the size of an
strong>See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
border: 1px solid black;
-ms-transform: scale(2.5,2); /* IE 9 */
-webkit-transform: scale(2.5,2); /* Safari */
transform: scale(2.5,2); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is scaled 2.5 times of its original width, and 2 times of its original height.
</div>
</body>
</html>
The skewX method
The CSS skewX function is employed to slant an element along the horizontal axis based on the specified angle. For instance, let's consider an example to apply a skew transformation.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis.
</div>
</body>
</html>
The skewY method
The CSS skewY function is employed to slant an element along the Y axis based on the specified angle. To illustrate, consider an example where we skew a
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewY(30deg); /* IE 9 */
-webkit-transform: skewY(30deg); /* Safari */
transform: skewY(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the Y-axis.
</div>
</body>
</html>
The skew method
The CSS skew function is employed to slant an element both horizontally and vertically based on the specified angle.
Let's select a <div> element and rotate it 30 degrees on the X-axis and 20 degrees on the Y-axis.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari */
transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis, and 20 degrees along the Y-axis.
</div>
</body>
</html>
The matrix method
The CSS matrix function consolidates all six 2D transformation methods into a single operation. It enables users to perform rotations, scaling, translations, and skewing on elements.
Syntax:
The components of the matrix function include: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
div#myDiv2 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div>
This is 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>