Introduction to CSS skew()
CSS skew() function is defined as the Transform property of CSS3 with built-in function which allows skewing an element in the 2-dimensional Plane with some parameters, it picks a point in any axis and pulls it in different directions (it tilts an element). In other terms, skew or shear transformation allows changing the appearance of an element like tilting it (changing or bending the respective element with x and y-axis). This CSS3 Transform uses 4 * 4 matrix for representation. This skew() drags its line alone any sides to distort an element.
Syntax
The syntax goes well like this since there is no specific declaration on the directions the general syntax is given below :
skew (ax, ay)
With Transform Property the Syntax looks like:
Transform: skew (<angle degree> [, <angle>]?);
For example if the sample is like this:
.class
{skew (-45 deg, 20 deg);
}
So this statement says it skews the element -45 degree horizontally which is x-axis angle and 20 degrees vertically along the Y-axis in the plane.
It takes two arguments ax and ay as angle values. Here ax is the default value and the value are provided for Y-axis. If no value is provided then it is assumed to be zero. This 2D skew distorts an element in either direction and their distance value are calculated in the unit of degrees. Other measurements like Percentage and pixels are avoided here.
- ax: This parameter skews the element along X-axis means along the sides.
- ay: This parameter skews the element along Y-axis means vertically in the opposite direction.
Here the values that is been assigned in degree say the positive value to shift the element to the left and negative values to the right. By this, an original image is tilted by using skewing. It looks like a mirror image in the background.
How does the skew() method work in CSS?
So far in the previous articles, we have seen the concept on CSS which allows applying text color etc. And CSS also has transformed a collection of functions which helps to shapes an element. One type of transformation Property is skew(). This skew() function helps in tilting a given text or an element concerning some degree. There are two axis X and Y-axis. Here Skew X is set to be default and skewY is set to Y-axis with some degree given. To skew in both the direction we must use skewX \() and skewY() function in the transform property.
4.5 (4,340 ratings)
View Course
| Sr. no | Skew function Example | Description |
| 1. | Transform: skewY(-20deg); | Tilt the value in the negative Y-direction. |
| 2. | Transform: skewX(-20deg); | Tilt the value in the positive X-direction. |
| 3. | Transform: skew (30deg, 30deg); | It tilts in both the direction. It says the first value represents ‘x’ value and the second value represents ‘ Y-axis’. |
| 4. | Transform: skew(45deg); | Here we have one value so it is considered as x- value and y-value is set to default zero |
Examples to Implement CSS skew()
In this section, we shall see this function examples.
Example #1
See in this example I have tilted the element in a negative direction using the property Transform.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.original_pic {
transform: translate(10px, 12%);
}
.after_skew {
transform-origin: top right;
transform: skew(-0.11turn, 30deg);
}
</style>
</head>
<body>
<h1>Top - Courses</h1>
<img class="original_pic" src="pythonimg.png" alt="Python">
<img class="after_skew" src="sas-img.png" alt="Sas- web">
</body>
</html>
Output:
Example #2 – Rotation with the skew
a)new.html
<html>
<section class="content">
<div class="bgm">
<h1> <b>Check this Page with lot of Fun Games!!!</b></h1>
<p>If You are interested join us in all adventures. Free to play with no limits.</p>
</div>
</section>
</html>
b)new.css
content {
background-image: linear-gradient(150deg, yellow, red);
padding: 6rem;
transform: rotate(-6deg) skew(-6deg);
margin-top: 6rem;
}
.bgm {
transform: skew(6deg);
}
Output:
Example #3 – Skewing a text
<!DOCTYPE html>
<html>
<head>
<title> skew()function with text</title>
<style>
body {
text-align:center;
}
h1 {
color:purple;
}
.Text {
font-size:40px;
font-weight:italic;
color:red;
transform: skew(40deg);
}
</style>
</head>
<body>
<h1> Making Skew</h1>
<h2> Sample Example Output</h2>
<div class="Text">This is one of the CSS Transform property</div>
</body>
</html>
Output:
Example #4 – Skew on one side- with Pseudo Elements
a)oneside.css
a {
color: yellow;
}
.oneside {
position: absolute;
width: 130px;
padding: 12px 30px 12px 12px;
font-size: 15px;
position: relative;
color: #e300ff;
background: #00ff00;
}
.oneside:after {
content: " ";
position: absolute;
display: block;
width: 120%;
height: 120%;
top: 1;
left: 1;
z-index: -1;
background: #FF0000;
transform-origin: left bottom;
-ms-transform: skew(-35deg, 0deg);
-webkit-transform: skew(-35deg, 0deg);
transform: skew(-35deg, 0deg);
}
b)oneside.html
<html>
<div class="oneside">
<a href="#">Scandivian Country</a>
</div>
</html>
Output:
Conclusion
So, this is all about the CSS transform skew function. To introduce some angles in the design this Skew() function is the small trick to be used in the CSS without adding features of white Space that is very helpful for the web developers. And of course, this CSS Skew() function has some exciting and cool stuff to work with.
Recommended Articles
This is a guide to CSS skew(). Here we discuss an how does skew() css work with appropriate syntax and respective examples. You can also go through our other related articles to learn more –
