Existe una variedad de procedimientos para aplicar la propiedad de transformación múltiple en un elemento. En este artículo discutiremos los más fáciles y populares. En el primer método, combinaremos la propiedad de transformación en sí. En el segundo método, usaremos las clases anidadas para aplicar otras transformaciones.
Método 1: en este método, combinaremos la propiedad de transformación. A la propiedad de transformación se le pueden dar varios valores que se aplican uno tras otro. Aplica el valor más a la derecha y luego los de la izquierda, lo que significa que el valor que está en último lugar en la lista se aplicaría primero. Esto es importante ya que cambiar el orden de los valores cambiaría el resultado general de la propiedad.
- Ejemplo: En este ejemplo, aplicaremos la propiedad de transformación en la imagen cargada, una rotará la imagen y otra la desplazará.
<!DOCTYPE html><html><head><style>body {margin: 20px;}.box {background: url(no-repeat;background-size: cover;height: 100px;width: 400px;border: 2px solid black;/* The transformations areapplied from right to left */transform: rotate(90deg)translate(150px, -230px);}h1 {color: green;}</style></head><body><h1>GeeksforGeeks</h1><b>How to apply multiple transforms in CSS?</b><p>The "box" class has both the rotate() andtranslate() transformations applied.</p><divclass="box"></div></body></html> - Producción:
Método 2: aquí estamos usando clases anidadas para aplicar otras transformaciones. Este método funciona anidando un elemento con una determinada transformación con otro con otra transformación. Esto se puede repetir con múltiples anidamientos de elementos para aplicar múltiples transformaciones. El elemento superior, es decir, el padre de los elementos anidados, se aplicaría primero y, posteriormente, cada una de las transformaciones de los hijos se aplicaría a continuación.
- Ejemplo: en este ejemplo, aplicaremos la propiedad de transformación en la imagen cargada, una rotará la imagen y otra cambiará la imagen.
<!DOCTYPE html><html><head><style>.outer-transform {/* This transformationwill be applied first */transform: translate(-150px, 150px);}.inner-transform {background: url(no-repeat;background-size: cover;height: 100px;width: 400px;border: 2px solid black;/* This transformationwould be applied next */transform: rotate(-90deg);}</style></head><body><h1style="color: green;">GeeksforGeeks</h1><b>How to apply multiple transforms in CSS?</b><p>The inner element has the rotate() transformation and<br> the outer element has the translate() transformationapplied.</p><divclass="outer-transform"><divclass="inner-transform"></div></div></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA