CSS transforms allow you to move, rotate, scale, and skew elements by using the CSS transform property.
With the CSS transform property you can use the following 2D transformation methods:
translate()
translateY()
translateX()
rotate()
scale()
scaleX()
scaleY()
skew()
skewX()
skewY()
matrix()
Translate(), TranslateY(), TranslateX()
Hover over the squares to see the effect:
Translate
TranslateY
TranslateX
The translate() method moves an element from its current position according to the parameters given for the X-axis and the Y-axis.
The following example moves the <div> element 20 pixels to the right, and 50 pixels down from its current position:
<!DOCTYPE html>
<html>
<head>
<style>
.example-square {
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: translate(20px,50px);
}
</style>
</head>
<body>
<div class="example-square">
This square is moved 20px to the right and 50px down from its current position.
</div>
</body>
</html>
Output:
This square is moved 20px to the right and 50px down from its current position.
The translateY() method moves an element from its current position according to the parameters given the Y-axis.
The following example moves the div element 30 pixels up from its current position:
<!DOCTYPE html>
<html>
<head>
<style>
.example-square {
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: translateY(-30px);
}
</style>
</head>
<body>
<div class="example-square">
This square is moved 30px up from its current position.
</div>
</body>
</html>
Output:
This square is moved 30px up from its current position.
The translateX() method moves an element from its current position according to the parameters given on the X-axis.
The following example moves the div element 100 pixels to the right from its current position:
<!DOCTYPE html>
<html>
<head>
<style>
.example-square {
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="example-square">
This square is moved 100px to the right from its current position.
</div>
</body>
</html>
Output:
This square is moved 100px to the right from its current position.
Rotate()
Hover over the square to see the effect:
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
The following example rotates the <div> element clockwise with 45 degrees:
<!DOCTYPE html>
<html>
<head>
<style>
.rotate-example {
display: flex;
}
.normal {
width: 120px;
height: 120px;
background-color: #2a9d8f;
margin-right: 30px;
}
.rotated {
width: 120px;
height: 120px;background-color: #2a9d8f;
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="rotate-example">
<div class="normal">
This is a normal div element.
</div>
<div class="rotated">
This div element is rotated clockwise 45 degrees.
</div>
</div>
</body>
</html>
Output:
This is a normal div element.
This div element is rotated clockwise 45 degrees.
Scale(),ScaleX(), ScaleY()
Hover over the squares to see the effect:
Scale
ScaleX
ScaleY
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
The following example increases the <div> element to be two times its original width, and three times its original height:
<!DOCTYPE html>
<html>
<head>
<style>
.scale {
margin: 150px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: scale(2,3);
}
</style>
</head>
<body>
<div class="scale">
This div element is increased two times of its original width, and three times of its original height.
</div>
</body>
</html>
Output:
This div element is increased two times of its original width, and three times of its original height.
ScaleX()
The ScaleX() method increases or decreases the width of an element.
The following example increases the <div> element to be two times its original width:
<!DOCTYPE html>
<html>
<head>
<style>
.scale-x {
margin: 150px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: scaleX(2);
</style>
</head>
<body>
<div class="scale-x">
This div element is increased two times of its original width.
</div>
</body>
</html>
Output:
This div element is increased two times of its original width.
ScaleY()
The ScaleY() method increases or decreases the height of an element.
The following example increases the <div> element to be two times of its original height:
<!DOCTYPE html>
<html>
<head>
<style>
.scale-y {
margin: 150px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
transform: scaleY(2);
</style>
</head>
<body>
<div class="scale-y">
This div element is increased two times of its original height.
</div>
</body>
</html>
Output:
This div element is increased two times of its original height.
Skew(), SkewX(), SkewY
Hover over the squares to see the effect:
Skew
SkewX
SkewY
The Skew() method skews an element along the X-axis and Y-axis by the given angles.
The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:
<!DOCTYPE html>
<html>
<head>
<style>
.skew-example {
display: flex;}
.normal-div, .skew-div {
margin:30px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
}
.skew-div {
transform: skew(20deg,10deg);
}
</style>
</head>
<body>
<div class="skew-example">
<div class="normal-div">
This a normal div element.
</div>
<div class="skew-div">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div></div>
</body>
</html>
Output:
This a normal div element.
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
SkewX()
The SkewX() method skews an element along the X-axis by the given angle.
The following example skews the <div> element 30 degrees along the X-axis:
<!DOCTYPE html>
<html>
<head>
<style>
.skewX-example {
display: flex;}
.normal-div, .skewX-div {
margin:30px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
}
.skewX-div {
transform: skewX(30deg);
}
</style>
</head>
<body>
<div class="skewX-example">
<div class="normal-div">
This a normal div element.
</div>
<div class="skewX-div">
This div element is skewed 30 degrees along the X-axis.
</div></div>
</body>
</html>
Output:
This a normal div element.
This div element is skewed 30 degrees along the X-axis.
SkewY()
The SkewY() method skews an element along the Y-axis by the given angle.
The following example skews the <div> element 30 degrees along the Y-axis:
<!DOCTYPE html>
<html>
<head>
<style>
.skewY-example {
display: flex;}
.normal-div, .skewY-div {
margin:30px;
width: 120px;
height: 120px;
background-color: #2a9d8f;
}
.skewY-div {
transform: skewY(30deg);
}
</style>
</head>
<body>
<div class="skewY-example">
<div class="normal-div">
This a normal div element.
</div>
<div class="skewY-div">
This div element is skewed 30 degrees along the Y-axis.
</div></div>
</body>
</html>
Output:
This a normal div element.
This div element is skewed 30 degrees along the Y-axis.
Matrix()
The Matrix() method combines all the 2D transform methods into one.
The matrix() method takes six parameters, containing mathematic functions, which allow you to rotate, scale, move (translate), and skew elements.
