This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to rotate an element based on the given angle as an argument. The angle can be set in terms of degrees, radians, or turns. In CSS, we can do that by using the CSS rotate() function.
Rotate classes:
- rotate-0: This class is for no rotation.
- rotate-1: This class is used to rotate 1 degree clockwise.
- rotate-2: This class is used to rotate 2 degrees clockwise.
- rotate-3: This class is used to rotate 3 degrees clockwise.
- rotate-6: This class is used to rotate 6 degrees clockwise.
- rotate-12: This class is used to rotate 12 degrees clockwise.
- rotate-45: This class is used to rotate 45 degrees clockwise.
- rotate-90: This class is used to rotate 90 degrees clockwise.
- rotate-180: This class is used to rotate 180 degrees clockwise.
- -rotate-1: This class is used to rotate 1 degree anti-clockwise.
- -rotate-2: This class is used to rotate 2 degrees anti-clockwise.
- -rotate-3: This class is used to rotate 3 degrees anti-clockwise.
- -rotate-6: This class is used to rotate 6 degrees anti-clockwise.
- -rotate-12: This class is used to rotate 12 degrees anti-clockwise.
- -rotate-45: This class is used to rotate 45 degrees anti-clockwise.
- -rotate-90: This class is used to rotate 90 degrees anti-clockwise.
- -rotate-180: This class is used to rotate 180 degrees anti-clockwise.
Syntax:
<element class="rotate-{degree}">...</element>Example:
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Rotate Class</b>
<div class="bg-green-300
mx-16
p-4
justify-between
grid grid-flow-col">
<div class="bg-no-repeat
w-16 h-16 transform rotate-0"
style=
"background-image:url(
</div>
<div class="bg-no-repeat
w-16 h-16 transform rotate-45"
style=
"background-image:url(
</div>
<div class="bg-no-repeat
w-16 h-16 transform rotate-90"
style="background-image:url(
</div>
<div class="bg-no-repeat
w-16 h-16 transform rotate-180"
style="background-image:url(
</div>
</div>
</body>
</html>
|
Output: