Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Skewing | Transformations
Advanced CSS Techniques
course content

Course Content

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookSkewing

skew() allows us to deviate an element's sides to the coordinate axes on a specific angle. The angle must be specified in degrees (deg). Also, we can determine the skew only for the x-axis or y-axis. The syntax is following:

  • skew() accepts 2 values. The X_angle value specifies the skew angle for the x-axis. The Y_angle value specifies the skew angle for the y-axis. If we don't set the second value (Y_angle), the browser understands it as skewX();
  • skewX(angle) specifies the skew along the x-axis;
  • skewY(angle) specifies the skew along the y-axis.

Let's run the following example to see what we can get with the help of skewing:

html

index

css

index

js

index

copy
Select the correct statement.

Select the correct statement.

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 6
some-alt