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

book
Skewing 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:

css
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:

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="box">skew(20deg, -30deg)</div>
<div class="box">skewX(-60deg)</div>
<div class="box">skewY(60deg)</div>
</div>
</body>
</html>
question mark

Select the correct statement.

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 6

Kysy tekoälyä

expand
ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

We use cookies to make your experience better!
some-alt