EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS skew()

CSS skew()

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

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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.

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
Note: skew() function can take negative values and larger values as well with the angle degree. The important thing to be noted is if it is set to 90 degrees an element vanishes its appearance as their two parallel sides touch together and become a long image. And 190 deg and 10 deg are of same. The value greater than 90 deg less than 180 deg appears as a mirror image.

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:

CSS skew() - 1

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:

CSS skew() - 2

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:

Skewing a text

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:

with Pseudo Elements

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 –

  1. CSS Clearfix
  2. CSS Center Div
  3. CSS Position Relative
  4. CSS line height
0 Shares
Share
Tweet
Share
quiz