How to Add Image in HTML Table ?

How to Rotate Image in HTML?

Last Updated : 08 Oct, 2024

Rotating and scaling images in HTML can enhance the visual presentation of your web content. By using CSS properties like transform, you can easily change the orientation and size of images. This will help you understand the process of rotating images using the rotate() function and scaling images with the scaleX() and scaleY() functions.

Rotating an Image with CSS

To rotate an image in HTML, you can use the transform: rotate() property. This property allows you to change the orientation of an image by a specified angle, measured in degrees, gradians, radians or turns.

Note: To rotate by 90 degrees any of the units can be used with their corresponding values. 90 degrees would equal 100 gradients or 0.25 turns.

Syntax:

transform: rotate(90deg);

Example: Implementation of the transform rotate property

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
            margin-top: 100px;
        }

        .rotate-image {

            /* Adjust the angle as needed */
            transform: rotate(45deg);
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Using transform: rotate() Property
    </h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
        alt="Rotated Image"
        class="rotate-image">
</body>

</html>

Output:

Screenshot-2023-12-20-102619

Scaling Images with CSS

In addition to rotating, you can also scale images along the x-axis and y-axis using the scaleX() and scaleY() functions.

1. scaleX() Function

The scaleX() function is an inbuilt function which is used to resize an element along the x-axis in a 2D plane. It scales the elements in a horizontal direction.

Syntax:

transform : scaleX( number ) 

// number is scalling factor

Example: Implementation of the transform scaleX( ) property

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
            margin-top: 100px;
        }

        .rotate-image {
            transform: scaleX(1.5);
          
            /* Adjust the scaling factor as needed */
          
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h3>
      Using transform: scaleX() Property
      </h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="Rotated Image"
         class="rotate-image">
</body>

</html>

Output:

Screenshot-2023-12-20-104154

2. scaleY() Function

The scaleY( ) function is an inbuilt function which is used to resize an element along the y-axis in a 2D plane. It scales the elements in a vertical direction.

Syntax:

transform: scaleY(scalingFactor);

Example: Implementation of the transform scale( ) property with an example.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
            margin-top: 100px;
        }

        .rotate-image {
            transform: scaleY(1.5);

            /* Adjust the scaling factor as needed */

            margin-top: 100px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h3>
      Using transform: scaleY() Property
      </h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="Rotated Image"
         class="rotate-image">
</body>

</html>

Output:

Screenshot-2023-12-20-103651

How to Add Image in HTML Table ?

aksrathod07

Improve

Article Tags :

Similar Reads

How to Move Image in HTML ?

The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement. Syntax<marquee> <i

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML. Table of Content Using img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary meth

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint

How to Work with Images in HTML?

Adding images to your web pages is crucial for enhancing visual appeal and user engagement. In HTML, there are different methods to embed images, and this guide will cover two common approaches with syntax and examples. These are the following ways to Work with Images in HTML: Table of Content Addin

How to render HTML to an image ?

Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de

How to Create an Image Map in HTML ?

An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp

How to Rotate Images in Google Docs

Here, we will cover How to spin or rotate in Google Docs easily. You can spin it left or right until it seems the way you need.ï»¿ Whether for college, work, or a school project, this skill becomes accessible. If you've got a photo, it's no longer pretty rightâ€”no issues. You can flip it around with a

How to Rotate an Image on Hover in CSS ?

In CSS, we can add a rotation effect on the image on hover. This increases the interactiveness of the application. We are going to learn how can we rotate an image on hover using CSS. Below are the approaches to rotate an image on hover using CSS: Table of Content Using transform Property(Clockwise

How to make an image draggable in HTML?

Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5. Making any HTML5 elements including images draggable is