This post will explain:
- Method 1: How to Rotate an Image in Image Source in HTML?
- Method 2: How to Rotate an Image in HTML utilizing CSS Properties?
Method 1: How to Rotate an Image in Image Source in HTML?
To rotate an image in the image source in HTML, utilize the inline CSS directly in the image source with the help of provided instructions.
Step 1: Create a “div” Container
First of all, create a “div” container with the help of the “<div>” tag and assign it a “class” attribute with a specific name.
Step 2: Add Image
Next, add an image by utilizing the “<img>” tag along with the “src” attribute. Then, assign the image name or image URL as an “src” value:
The resultant output shows that the image has been added successfully:
Step 3: Rotate the Image
Next, to rotate the image in an image source, apply the inline CSS with the help of the “style” attribute along with the CSS property “transform:rotate(30deg)”. The “transform” is used for applying the transformation to the defined element. There are four possible values for transformation: “rotate”, “scale”, “move”, and “skew”. More specifically, the “rotate()” function is utilized to rotate the image around a 2D plane:
Output
Step 3: Apply Styling on Image Source Using CSS
Users can also apply the other CSS properties on the image source according to their needs. For this purpose, first, access the “.source-img” class and apply the CSS properties as follows:
width:100px;
height:250px;
margin:100px;
}
Here:
- “width” is utilized for setting the width of the element.
- “height” property allocates a specific height to an element.
- “margin” is used to set the blank space around the element.
Output
Method 2: How to Rotate an Image in HTML Utilizing CSS Properties?
Users can also rotate the image using embedded CSS. Multiple properties can be used for this purpose, such as the “rotate” property and the “transform” property.
Follow the provided examples to rotate the image using CSS:
- Example 1: Rotate Image Using “rotate” Property
- Example 2: Rotate Image Using “transform” Property
Example 1: Rotate Image Using “rotate” Property
The “rotate” CSS property is utilized for rotating the element clockwise around the 2D plane. To apply this property for rotating the image, check out the given steps.
Step 1: Create a “div” Container
Create a “div” container by using the “<div>” tag and insert a class attribute with a specific name.
Step 2: Add an Image
Then, add an image with the help of the “<img>” tag along with the “src” and “alt” attributes. The “alt” attribute is used to set alternative text for the image:
Output
Step 3: Apply “rotate” Property
Now, access the class using the class selector and name “.rotate”. Then, apply the “margin” and the “rotate” property on it. For instance, the value of the “rotate” is set as “45deg”:
margin: 100px 50px;
rotate: 45deg;
}
The output indicates that the image is rotated successfully using the “rotate” attribute:
Example 2: Rotate Image Using “transform” Property
Access the class using “.rotate”. Then, apply the “margin” and “transform” properties:
margin:100px 50px;
transform: rotate(320deg);
}
Here, the “transform” property is used to transform the image. In our scenario, the value is set as “rotate(320deg)”. Where “rotate()” is a function used to rotate the element:
The above output shows that the image is rotated on the specified angle around the 2D plane.
Conclusion
To rotate the image in the image source in HTML, users can utilize the “style” attribute and set the value as “transform:rotate()”. Furthermore, you can also use the embedded CSS to rotate the image in the image source with the help of “rotate” properties. This article has stated the procedures related to rotating the image in the image source in HTML.
