The skew in the CSS transform property helps us to skew the 2D objects.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  padding: 30px;
  background-color: yellow;
  border: 1px solid black;
  text-align: center;
  color: blue;
}

div#one {
  transform: skewX(-30deg);
}

div#two {
  transform: skewY(-0.08turn);
}

div#three {
  transform: skew(25rad, 33grad); 
}
</style>
</head>
<body>

<h1>Learning about skew() and skewX() skewY()</h1>

<div>
  Normal
</div>

<div id="one">
  Skewing here the element along the X-axis by -30 degrees.
</div>

<div id="two">
  Skewing here the element along the Y-axis by -0.08 turn.
</div>

<div id="three">
  Skewing here the element along the X-axis by 25 radians and Y-axis by 33 grades.
</div>
</body>
</html>

Comforting Tools

Pages

Popular Posts

transform: skew(); in CSS

Contact Form