Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se utiliza para especificar el origen de la rotación de un elemento. Es el punto sobre el cual se gira un elemento. Se puede utilizar tanto para rotaciones 2D como 3D. En CSS, podemos hacer eso usando la propiedad transform-origin de CSS .
Transformar clases de origen:
- origin-center: Esta clase se utiliza para establecer el origen del elemento como centro.
- origin-top: esta clase se utiliza para establecer el origen del elemento como superior.
- origin-top-right: Esta clase se usa para establecer el origen del elemento como arriba a la derecha.
- origin-right: esta clase se utiliza para establecer el origen del elemento como correcto.
- origin-bottom-right: Esta clase se usa para establecer el origen del elemento como abajo a la derecha.
- origin-bottom: esta clase se utiliza para establecer el origen del elemento como fondo.
- origin-bottom-left: Esta clase se usa para establecer el origen del elemento como abajo a la izquierda.
- origin-left: Esta clase se utiliza para establecer el origen del elemento como izquierdo.
- origin-top-left: esta clase se utiliza para establecer el origen del elemento como superior izquierdo.
Sintaxis:
<element class="origin-{keyword}">...</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 Transform Origin Class</b> <div class="bg-green-300 mx-16 p-4 justify-between grid grid-flow-col"> <div class="bg-yellow-500 w-16 h-16"> <div class="bg-no-repeat w-16 h-16 origin-center transform rotate-45" style= "background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> <div class="bg-yellow-500 w-16 h-16"> <div class="bg-no-repeat w-16 h-16 origin-top-left transform rotate-45" style= "background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> <div class="bg-yellow-500 w-16 h-16"> <div class="bg-no-repeat w-16 h-16 origin-bottom-right transform rotate-45" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> <div class="bg-yellow-500 w-16 h-16"> <div class="bg-no-repeat w-16 h-16 origin-left transform rotate-45" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </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