Es gibt eine Vielzahl von Verfahren, um mehrere Transformationseigenschaften in einem Element anzuwenden. In diesem Artikel werden wir die einfachsten und beliebtesten besprechen. In der ersten Methode werden wir die Transformationseigenschaft selbst kombinieren. In der zweiten Methode verwenden wir die verschachtelten Klassen, um andere Transformationen anzuwenden.

Methode 1: In dieser Methode kombinieren wir die Transformationseigenschaft. Der Transformationseigenschaft können mehrere Werte zugewiesen werden, die nacheinander angewendet werden. Es wendet den Wert ganz rechts und dann die Werte ganz links an, was bedeutet, dass der letzte Wert in der Liste zuerst angewendet wird. Dies ist wichtig, da eine Änderung der Reihenfolge der Werte das Gesamtergebnis der Eigenschaft verändern würde.

  • Beispiel: In diesem Beispiel wenden wir beide Transform-Eigenschaften auf das geladene Bild an, eine dreht das Bild und eine andere verschiebt das Bild.




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                margin: 20px;
            }
              
            .box {
                background: url(
    "https://media.geeksforgeeks.org/wp-content/uploads/20191227120549/gfg77.png")
                  no-repeat;
                background-size: cover;
                height: 100px;
                width: 400px;
                border: 2px solid black;
                
                /* The transformations are 
                   applied 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() and
            translate() transformations applied.
        </p>
        <div class="box"></div>
    </body>
      
    </html>
  • Ausgabe:

Methode 2: Hier verwenden wir verschachtelte Klassen, um andere Transformationen anzuwenden. Diese Methode funktioniert, indem ein Element mit einer bestimmten Transformation mit einem anderen Element mit einer anderen Transformation verschachtelt wird. Dies kann mit mehreren Verschachtelungen von Elementen wiederholt werden, um mehrere Transformationen anzuwenden. Das oberste Element, d. h. das übergeordnete Element der verschachtelten Elemente, würde zuerst angewendet, und anschließend würden als Nächstes alle Transformationen der untergeordneten Elemente angewendet.

  • Beispiel: In diesem Beispiel wenden wir beide Transform-Eigenschaften auf das geladene Bild an, eine dreht das Bild und eine andere verschiebt das Bild.




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .outer-transform {
                
                /* This transformation
                   will be applied first */
                transform: translate(-150px, 150px);
            }
              
            .inner-transform {
                background: url(
    "https://media.geeksforgeeks.org/wp-content/uploads/20191227120549/gfg77.png") 
                  no-repeat;
                background-size: cover;
                height: 100px;
                width: 400px;
                border: 2px solid black;
                
                /* This transformation
                   would be applied next */
                transform: rotate(-90deg);
            }
        </style>
    </head>
      
    <body>
        <h1 style="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() transformation
             applied.
        </p>
        <div class="outer-transform">
            <div class="inner-transform"></div>
        </div>
    </body>
      
    </html>
  • Ausgabe: