Image Rotation Web App
Images helps users to understand the content better and in an easy way . And it helps to improve the appearance of the website. Sometimes you might want to rotate or flip images based on the requirements. This Image Rotation Web App will help you to rotate the images in your HTML using the CSS transform property based on the requirement.
And to change the orientation of image you can use the CSS transform property along with the rotate() function. Based on the specified angle the image is rotated.
What is Image Rotation Web app ?
Image Rotation Web App helps you to rotate the image. You can change the orientation of the image. “transform” is the CSS property which is used to rotate the image. We can adjust the angle based on the user specification.
rotate() function:
rotate() is an inbuilt function which is used to rotate the image based on the angle mentioned. The image is rotated based on the argument passed in the rotate() function. The angle can be in the form of degrees, gradians, radians.
Syntax:
The syntax for the rotate function is
transform: rotate(90deg);
HTML code for Image Rotation
<html>
<head>
<style>
body{
text-align: center;
margin-top: 100px;
}
.rotate-image{
transform: rotate(90deg);
margin-top: 100px;
}
</style>
</head>
<body>
<h1 style="color: red;">
Image Rotation
</h1>
<h3 style="color: blue;">Using transform: rotate() Property</h3>
<img src="https://portfolio.photoseek.com/img-get2/I00006cVnFTzTqNU/fit=1000x750/07SAW-0341.jpg"
alt="Rotated Image"
class="rotate-image">
</body>
</html>
OUTPUT
http://C:\Users\allen\OneDrive\Pictures\Screenshots\imagerotation.JPG