Tailwind CSS Transforms Complete Reference
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Transform utilities are used to control the transform behavior of any element. This class is used to transform the element like rotation, scaling, translating the element.
Tailwind CSS Class |
Description |
Example |
---|---|---|
Transform | It controls the transform behavior of any element. | |
Transform Origin | It specifies the origin of the rotation of an element. | |
Scale | It is used to resize the element in the 2D plane. | |
Rotate | It rotates an element based on the given angle as an argument. | |
Translate | It is used to translating elements with transform. |
Below example will give you a brief idea about the Transforms of Tailwind CSS:
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" > w3wiki </ 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( https://media.w3wiki.net/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </ div > < div class="bg-no-repeat w-16 h-16 transform rotate-45" style= "background-image:url( https://media.w3wiki.net/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </ div > < div class="bg-no-repeat w-16 h-16 transform rotate-90" style="background-image:url( https://media.w3wiki.net/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </ div > < div class="bg-no-repeat w-16 h-16 transform rotate-180" style="background-image:url( https://media.w3wiki.net/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </ div > </ div > </ body > </ html > |
Output:
Contact Us