To translate, rotate, scale, and skew elements the CSS3 transform property is used. Transformation, in general, is an effect. It changes the shape, size, and position of an element. CSS3 supports both 2D and 3D transformation.
CSS 2D Transforms:
To modify the structure of an element as translate, rotate, scale, and skew, the CSS 2D transforms are used. CSS3 provides the following 2D transforms methods:
- translate(x,y): To transform the element along X-axis and Y-axis, this method is used.
- translateX(n): To transform the element along X-axis, this method is used.
- translateY(n): To transform the element along Y-axis, this method is used.
- rotate(): To rotate the element based on an angle, this method is used.
- scale(x,y): To modify the width and height of an element, this method is used.
- scaleX(n): To modify the width of an element, this method is used.
- scaleY(n): To modify the height of an element, this method is used.
- skewX(): To define the skew transforms along with X-axis, this method is used.
- skewY(): To define the skew transforms along with Y-axis, this method is used.
- matrix(): To define the matrix transforms, this method is used.
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:
To move an element from its current position relative to the given coordinates i.e. X-axis and Y-axis, The CSS translate() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: red;
color:white;
text-align:center;
border: 5px solid brown;
-ms-transform: translate(100px,80px);
-webkit-transform: translate(100px,80px);
transform: translate(100px,80px);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are translating an element from its current position to 100 pixels right and 80 pixels down.
The rotate() method:
To rotate an element clockwise or anti-clockwise relative to the specified degree, the CSS rotate() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: brown;
color: white;
border: 5px solid black;
text-align: center;
}
div#myDiv {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
<div id="myDiv">
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are rotating an element by 30 degrees.
The scale() method:
To increase or decrease the size of an element relative to the specified width and height, the CSS scale() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: brown;
color: white;
border: 2px solid black;
-ms-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are increasing the size of an element by expanding its width and height to two times.
The skewX() method:
To skew an element along the X-axis relative to the specified angle, the CSS skewX() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: brown;
color: white;
border: 2px solid black;
}
div#myDiv {
-ms-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
transform: skewX(30deg);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
<div id="myDiv">
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are skewing an element to 30 degrees along the X-axis.
The skewY() method:
To skew an element along the Y-axis relative to the specified angle, the CSS skewY() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: brown;
color: white;
border: 2px solid black;
}
div#myDiv {
-ms-transform: skewY(25deg);
-webkit-transform: skewY(25deg);
transform: skewY(25deg);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
<div id="myDiv">
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are skewing an element to 25 degrees along the Y-axis.
The skew() method:
To skew an element along the X-axis and the Y-axis relative to the specified angle, the CSS skew() method is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: brown;
color: white;
border: 2px solid black;
}
div#myDiv {
-ms-transform: skew(30deg,25deg);
-webkit-transform: skew(30deg,25deg);
transform: skew(30deg,25deg);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
<div id="myDiv">
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are using an <div> element which is skewed 30 degrees along the X-axis and 25 degrees along the Y-axis.
The matrix() method:
To combine all the six 2D transform methods to rotate, scale, translate, and skew elements together, the CSS matrix() method is used.
Syntax:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: brown;
color: white;
border: 2px solid black;
}
div#myDiv {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<h1>Example:</h1>
<div>
<h1>Hello World!!</h1>
</div>
<div id="myDiv">
<h1>Hello World!!</h1>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the use of the CSS matrix() method.