How to rotate an element using CSS ? Last Updated : 31 Aug, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ChromeInternet ExplorerFirefoxSafariOpera Comment More infoAdvertise with us Next Article How to Animate Details Element using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads 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 2 min read 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 3 min read 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 3 min read 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.Appr 2 min read How to rotate an HTML div element 90 degrees using JavaScript ? An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale, and others to perform various kinds of transformation to elements. ApproachThe rotate() transformation function can be used as the value to rotate the element. It takes one parameter 2 min read How to apply multiple transform property to an element using CSS ? There is a variety of procedures to apply multiple transform property in an element. In this article we will discuss the easiest and popular ones. In the 1st method we will be combining the transform property itself. In the 2nd method, we will use the nested classes to apply other transforms. Method 3 min read Like