The CSS skewX() Function
Give skewX() an angle and the element leans along the X-axis by that amount.
Example
Here a 20-degree angle skews the <div> horizontally, on the X-axis.
Prompt
Create a page that shows a div element skewed 20 degrees along the X-axis using the CSS
skewX() transform function. Include both a normal div and the skewed div for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewX()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewX(20deg);
}
</style>
</head>
<body>
<h2>CSS skewX() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewX 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
The CSS skewY() Function
skewY() does the same on the other axis: the element leans along the Y-axis by the angle you pass.
Example
On the Y-axis this time, the <div> below leans by 20 degrees.
Prompt
Create a page that shows a div element skewed 20 degrees along the Y-axis using the CSS
skewY() transform function. Include both a normal div and the skewed div for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewY()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewY(20deg);
}
</style>
</head>
<body>
<h2>CSS skewY() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewY 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the Y-axis</div>
</body>
</html>
The CSS skew() Function
To skew along both axes in one call, pass skew() an angle for X and an angle for Y.
Leave out the second parameter and it counts as zero, so the element leans on the X-axis alone.
Skew along both axes
Two angles are given to the <div> here: 20 degrees for the X-axis and 10 degrees for the Y-axis.
Prompt
Create a page that shows a div element skewed 20 degrees along the X-axis and 10 degrees along the Y-axis using the CSS
skew() transform function. Include both a normal div and the skewed div for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg, 10deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis and 10 degrees along the Y-axis</div>
</body>
</html>
Skew with one parameter
With a single parameter of 20 degrees, the <div> leans only along the X-axis.
Prompt
Create a page that shows a div element skewed 20 degrees along the X-axis using the CSS
skew() function with only one parameter. Include both a normal div and the skewed div for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew() with one parameter</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function - One Parameter</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
The CSS matrix() Function
matrix() merges every 2D transform function into one call.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) shows its six parameters in order.
A single declaration can therefore rotate, scale, move (translate), and skew an element.
Example
Prompt
Create a page that shows a div element transformed using the CSS
matrix() function with values matrix(1, -0.3, 0, 1, 0, 0). Include both a normal div and the transformed div for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS matrix()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.transformed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<h2>CSS matrix() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Transformed div (matrix):</p>
<div class="transformed">This div is transformed using the matrix() function</div>
</body>
</html>