Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
The CSS rotate() Function
The rotate() function in CSS rotates an element. The parameter sets the angle for rotation. Values can be degrees, radians, etc. The transform property is used to set the rotation.
Syntax
The following is the syntax of the rotate() −
transform: rotate(angle);
The angle is set as a parameter, such as 45deg, 90deg, etc.
Rotate an element by 45 degrees
To rotate an element by 45 degrees, use the rotate() function −
transform: rotate(45deg);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Rotate an element by 90 degrees
To rotate an element by 90 degrees, use the rotate() function −
transform: rotate(90deg);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Rotate an image
To rotate an image, we have used the transform property with the rotate() function. Set the same for the image css class set here −
.demoImg {
transform: rotate(45deg);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.demoImg {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>Rotation</h3>
<img class="demoImg" src="https://www.tutorialspoint.com/python/images/python.jpg?v1" alt="Tutorial">
</body>
</html>
Rotate and change the position of the transformed element
To change the position of transformed elements, use the transform-origin property with the transform property. The x-axis can be placed left, right, center, length unit, etc. The y-axis can be placed top, center, bottom, length unit, etc.
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.demoImg {
transform-origin: bottom left;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>Rotation</h3>
<img class="demoImg" src="https://www.tutorialspoint.com/python/images/python.jpg?v1" alt="Tutorial">
</body>
</html>
145 Views
