Now before going to create some more examples, we need to understand about CSS3 Transforms.
CSS3 Transforms
CSS3 Transforms are used to translate, rotate, scale, and skew elements. Transformation effect changes the shape, size, and position of an element.
CSS3 2D Transforms
In this article we will understand about the 2D transformation methods:
- rotate()
- scale()
- skew()
- translate()
The rotate() method rotates an element clockwise or counter-clockwise (using negative values) according to a given degree.
Example 1:
In this example we will see a rotate effect on the image so we will add some images in the body part of the HTML document and then we will apply the transformation effect by using the 2D transformation rotate() method.
Now first we will create an HTML document by the following code.
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>Image Rotate Effect</title>
- </head>
-
- <body>
- <img class="image" src="smile.jpeg">
- <img class="image" src="corner.png">
- <img class="image" src="holi.jpg">
- <img class="image" src="NewYear.jpg">
- <img class="image" src="Day.jpg">
- </body>
-
- </html>
First, we will add style for default view of the image, for this we will use rotate() method with 0 degrees and transition property with duration 1 second. then on the mouse over we will rotate the image clockwise with 360 degrees.