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
Define skew transforms along with x axis using CSS
The CSS skewX() transform function distorts an element by skewing it along the x-axis (horizontally). This creates a slanted effect where the element appears tilted to the left or right while maintaining its height.
Syntax
transform: skewX(angle);
Where angle is specified in degrees (deg) or radians (rad). Positive values skew the element to the left, while negative values skew it to the right.
Example: Skewing Element Along X-Axis
The following example demonstrates how to apply a skew transform 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-family: Arial, sans-serif;
}
#skewDiv {
transform: skewX(20deg);
background-color: lightblue;
}
</style>
</head>
<body>
<div>
Normal Element
</div>
<div id="skewDiv">
Skewed Element (20deg)
</div>
</body>
</html>
Two rectangular boxes are displayed. The first box appears normal in pink color. The second box is skewed 20 degrees along the x-axis, creating a slanted parallelogram shape in light blue color, tilted to the left.
Example: Different Skew Angles
Here's how different angle values affect the skew transformation −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px;
}
.box {
width: 200px;
height: 60px;
background-color: #4CAF50;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.skew-positive {
transform: skewX(30deg);
background-color: #FF6B6B;
}
.skew-negative {
transform: skewX(-30deg);
background-color: #4ECDC4;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Normal (0deg)</div>
<div class="box skew-positive">Positive (+30deg)</div>
<div class="box skew-negative">Negative (-30deg)</div>
</div>
</body>
</html>
Three boxes are displayed vertically. The first box is normal and green. The second box is skewed +30 degrees (tilted left) in red color. The third box is skewed -30 degrees (tilted right) in teal color.
Conclusion
The skewX() transform is useful for creating dynamic visual effects and geometric shapes. Positive angles tilt elements to the left, while negative angles tilt them to the right, providing flexibility in design layouts.
Updated on: 2026-03-15T12:07:46+05:30
230 Views
Advertisements