QP School
Transformations in CSS3 - Printable Version

+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Transformations in CSS3 (/showthread.php?tid=5179)



Transformations in CSS3 - Qomplainerz - 07-26-2023

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.