Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se usa para rotar un elemento basado en el ángulo dado como argumento. El ángulo se puede establecer en términos de grados, radianes o vueltas. En CSS, podemos hacer eso usando la función de rotate() de CSS .
Rotar clases:
- rotar-0: esta clase es para no rotar.
- rotar-1: esta clase se usa para rotar 1 grado en el sentido de las agujas del reloj.
- rotar-2: esta clase se usa para rotar 2 grados en el sentido de las agujas del reloj.
- rotar-3: esta clase se usa para rotar 3 grados en el sentido de las agujas del reloj.
- rotar-6: esta clase se usa para rotar 6 grados en el sentido de las agujas del reloj.
- rotar-12: esta clase se usa para rotar 12 grados en el sentido de las agujas del reloj.
- rotar-45: esta clase se usa para rotar 45 grados en el sentido de las agujas del reloj.
- rotar-90: esta clase se usa para rotar 90 grados en el sentido de las agujas del reloj.
- rotar-180: esta clase se usa para rotar 180 grados en el sentido de las agujas del reloj.
- -rotate-1: esta clase se usa para rotar 1 grado en sentido contrario a las agujas del reloj.
- -rotate-2: esta clase se usa para rotar 2 grados en sentido antihorario.
- -rotate-3: esta clase se usa para rotar 3 grados en sentido antihorario.
- -rotate-6: esta clase se usa para rotar 6 grados en sentido antihorario.
- -rotate-12: esta clase se usa para rotar 12 grados en sentido contrario a las agujas del reloj.
- -rotate-45: esta clase se usa para rotar 45 grados en sentido contrario a las agujas del reloj.
- -rotate-90: esta clase se usa para rotar 90 grados en sentido antihorario.
- -rotate-180: esta clase se usa para rotar 180 grados en sentido antihorario.
Sintaxis:
<element class="rotate-{degree}">...</element>
Ejemplo:
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( https://media.geeksforgeeks.org/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.geeksforgeeks.org/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.geeksforgeeks.org/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.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA