07-26-2023, 07:20 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Transformations Example</title>
<style>
/* Apply multiple transformations to the image */
img {
width: 200px;
height: 150px;
border: 1px solid black;
transform: rotate(20deg) scale(1.5) skew(10deg);
}
</style>
</head>
<body>
<img src="example.jpg" alt="Transformed Image">
</body>
</html>
Explanation:
Transformations (transform) allow you to manipulate the appearance of elements. In this example, the img element is rotated 20 degrees, scaled to 1.5 times its original size, and skewed by 10 degrees.
<!DOCTYPE html>
<html>
<head>
<title>Transformations Example</title>
<style>
/* Apply multiple transformations to the image */
img {
width: 200px;
height: 150px;
border: 1px solid black;
transform: rotate(20deg) scale(1.5) skew(10deg);
}
</style>
</head>
<body>
<img src="example.jpg" alt="Transformed Image">
</body>
</html>
Explanation:
Transformations (transform) allow you to manipulate the appearance of elements. In this example, the img element is rotated 20 degrees, scaled to 1.5 times its original size, and skewed by 10 degrees.