D3.js tsv() Function

How to rotate an element using CSS ?

Last Updated : 31 Aug, 2020

The purpose of this article is to rotate an HTML element by using CSS transform property. This property is used to move, rotate, scale and to perform various kinds of transformation of elements.

The rotate() function can be used to rotate any HTML element or used for transformations. It takes one parameter which defines the rotation angle. The rotation angle consists of two parts, the value of the rotation followed by the unit of rotation. The unit can be defined in degrees (deg), gradient (grad), radians (rad) and turns.

Syntax:

transform: rotate(90deg);

Example: The following example demonstrates rotation of an image by 45 degree.

HTML

   
 <!DOCTYPE html>  
<html>  
  
<head>      
    <style>  
        body {  
            text-align:center;  
        }  
        h1 {  
            color:green;  
        }  
        .rotate_image {  
            transform: rotate(45deg);  
        }  
    </style>  
</head>  
  
<body>  
    <h1>GeeksforGeeks</h1>  
    <h2> 
        How to rotate an element using CSS? 
    </h2>  
      
     <img class="rotate_image" src=  
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
          alt="GeeksforGeeks logo">  
</body>  
  
</html> 

Output:
Before Rotation:

After Rotation:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Safari
Opera

D3.js tsv() Function

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to style even and odd elements using CSS ?

In this article, we will learn how to style even and odd elements using CSS. Styling every element uniformly may not always be the best approach. you'll explore multiple approaches to differentiate between even and odd elements. This is particularly valuable for designing lists, tables, or structure

How to centre an Element using Tailwind CSS ?

Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g

How to add rounded corner to an element using CSS ?

In this article, we will discuss rounded corners by using CSS properties. When we remove the sharp edge of any element and give it a round shape, it is called a rounded corner. Approach: To change the sharp edge with a rounded edge we use the border-radius property. Example 1: In this example, we na

How to Move an Element in a Circular Path using CSS ?

In this article, we will see how to move an element in a circular path using CSS. Approach: We will create an HTML element, and add some CSS styles to it. We will use the animation property to add an animation effect to move the element in a circular path.Add some CSS styles to set the width, height

How to Animate Details Element using CSS ?

Details Element is an element in HTML to create a Dialog box with some summary that can open or close. In this article, you will understand to animate the details element using CSS. Syntax: <details [open]> <summary> ... </summary> </details>open: By adding this attribute, we

How to create rotating disc effect using CSS?

The Rotating Disc Effect also known as Overlapping Disc Effect is a type of illusion effect that can be used for various purposes on a website. It can be used in anything from a loader sticker to creating an illusion for the user. It is called overlapped disc because there are many overlapped discs

How to center an element using position:fixed in CSS ?

Centering an element using position: fixed in CSS means fixing the element relative to the browser window and aligning it in the center. This can be achieved by setting top: 50%, left: 50%, and using `transform: translate(-50%, -50%)` to adjust for its size. Examples of centering an element using po

How to draw an ellipse using CSS ?

We can take a div element and set its width and height property to make a rectangle. Then apply border-radius property on rectangular div element to convert rectangle to ellipse. By setting the border-radius to 50% and adjusting the width and height of the element, an elliptical shape can be created

How to Add Onclick Effect using CSS ?

In this article, we will see how to add onclick effect using CSS. To add the onclick effect using CSS, we can use :active pseudo selector. When an element is clicked, the onclick JavaScript event is launched. JavaScript is required to add an event listener to the HTML element and then run some code

How to Flip an Image on hover using CSS?

Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect. App