Computer >> Computer tutorials >  >> Programming >> CSS

The CSS skew() Function

The skew() function is used to skew an element in the 2D place. Set the amount of skewing to be applied as parameter of the skew() function.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(50px, 10%);
}
.skew_img {
   transform-origin: top left;
   transform: skew(45deg, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Output

The CSS skew() Function

Example

Let us now see another example −

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(50px, 10%);
}
.skew_img {
   transform-origin: top left;
   transform: skew(-0.06turn, 18deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Output

The CSS skew() Function