How to Rotate Image in Html
Web structure starts with solid HTML. Learn how How to Rotate Image in Html contributes to accessible and semantic web pages in the tutorial below.
To rotate an image in HTML, we need to adhere to the following steps outlined below. By following these guidelines, we can effectively rotate an image.
In the initial step, it is necessary to input the HTML code into a text editor or access the current HTML file in the text editor where the image rotation is intended.
<!Doctype Html>
<Html>
<Head>
<Title>
Rotate an Image
</Title>
</Head>
<Body>
Hello User!... <br> <center>
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Logo" width="100" height="100" > </center>
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the head element of the Html file and proceed to specify the styles within the <style> element, as illustrated in the subsequent code block. Subsequently, proceed to declare the various properties within a class. The CSS class provided within the style tag includes diverse properties that facilitate the rotation of an image.
<Head>
<Title>
Rotate an Image
</Title>
<style>
.rotate90 {
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</Head>
Step 3 involves specifying the class within the <img> attribute of the image that needs to undergo rotation.
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" width="100" height="100" class="rotate90">
Step 4: Finally, it is necessary to save the HTML file and then open it in a web browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Rotate an Image
</Title>
<style>
.rotate90 {
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</Head>
<Body>
Hello User!... <br> <center>
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Logo" width="100" height="100" class="rotate90"> </center>
</Body>
</Html>
The result of the HTML code above can be viewed in the screenshot below:
