Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Rotate div with skew x-axis using CSS
The CSS transform: skewX() property allows you to skew an element along the x-axis, creating a slanted or tilted effect. This transformation distorts the element horizontally while keeping the y-axis unchanged.
Syntax
selector {
transform: skewX(angle);
}
Possible Values
| Value | Description |
|---|---|
deg |
Angle in degrees (positive values skew left, negative values skew right) |
rad |
Angle in radians |
turn |
Angle in turns (1 turn = 360 degrees) |
Example
The following example demonstrates how to apply skew transformation to a div element along the x-axis −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.skew-div {
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>Original Div</div>
<div class="skew-div">Skewed Div (20 degrees)</div>
</body>
</html>
Two pink rectangular boxes appear: 1. The first box is normal and rectangular 2. The second box is skewed along the x-axis by 20 degrees, creating a parallelogram shape that leans to the left
Different Skew Angles
Here's an example showing various skew angles to demonstrate the effect −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.box {
width: 150px;
height: 80px;
background-color: lightblue;
border: 2px solid navy;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.skew-10 { transform: skewX(10deg); }
.skew-30 { transform: skewX(30deg); }
.skew-negative { transform: skewX(-20deg); }
</style>
</head>
<body>
<div class="container">
<div class="box">Normal</div>
<div class="box skew-10">10°</div>
<div class="box skew-30">30°</div>
<div class="box skew-negative">-20°</div>
</div>
</body>
</html>
Four light blue boxes are displayed in a row: 1. Normal rectangular box 2. Box skewed left by 10 degrees (slight slant) 3. Box skewed left by 30 degrees (more pronounced slant) 4. Box skewed right by 20 degrees (slants in the opposite direction)
Conclusion
The skewX() transform function is useful for creating dynamic visual effects and geometric shapes. Positive values create a left-leaning slant, while negative values create a right-leaning slant.
Updated on: 2026-03-15T12:01:41+05:30
203 Views
Advertisements