Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Skewing Elements for Unique Designs | Transforming Elements with CSS
Advanced CSS Techniques

bookSkewing Elements for Unique Designs

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:

transform: skew(X_angle, Y_angle);
transform: skewX(angle);
transform: skewY(angle);
  • 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:

index.html

index.html

index.css

index.css

copy
question mark

Select the correct statement.

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookSkewing Elements for Unique Designs

Sveip for å vise menyen

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:

transform: skew(X_angle, Y_angle);
transform: skewX(angle);
transform: skewY(angle);
  • 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:

index.html

index.html

index.css

index.css

copy
question mark

Select the correct statement.

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6
some-alt