How to apply multiple transform property to an element using CSS ? Last Updated : 31 Dec, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report There is a variety of procedures to apply multiple transform property in an element. In this article we will discuss the easiest and popular ones. In the 1st method we will be combining the transform property itself. In the 2nd method, we will use the nested classes to apply other transforms. Method 1: In this method, we will combine the transform property. The transform property can be given multiple values that are applied one after another. It applies the rightmost value and then the ones on the left, which means that the value which is last in the list would be applied first. This is important as changing the order of the values would change the overall result of the property. Example: In this example we will apply both the transform property on the loaded image, one will rotate the image and another one will shift the image. html <!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> Output: Method 2: Here we are using nested classes to apply other transforms. This method works by nesting one element with a certain transform with another one with another transform. This can be repeated with multiple nesting of elements to apply multiple transforms. The topmost element, that is the parent of the nested elements would be applied first and then subsequently each of the children's transforms would be applied next. Example: In this example, we will apply both the transform property on the loaded image one will rotate the image and another one will shift the image. html <!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> Output: Comment More infoAdvertise with us Next Article How to apply CSS in a particular div element using jQuery ? S sayantanm19 Follow Improve Article Tags : Web Technologies CSS CSS-Misc Similar Reads How to apply css property to a child element using JQuery? The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery. Syntax: // Note : children method selects the direct child to paren 2 min read How to create multiple transitions on an element using CSS ? In this article, we are going to learn how we can have multiple transitions on an element. Generally, we apply or create more than one transition to create some effects in our design. In CSS there are certain properties that can be transitioned.Approach: To have multiple transitions on an element, b 3 min read How to apply CSS in a particular div element using jQuery ? In this article, we will set the CSS of a div element using jQuery. We will use the CSS property to set the CSS.Approach: We will create a div element with some text and hyperlinks. Then we will use jQuery to apply CSS to the div element. jQuery comes with the function .css() where we can get and se 2 min read How to add CSS properties to an element dynamically using jQuery ? In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to 1 min read How to rotate an element using CSS ? The purpose of this article is to rotate an HTML element by using CSS transform property. This property is used to move, rotate, scale and to perform various kinds of transformation of elements. The rotate() function can be used to rotate any HTML element or used for transformations. It takes one pa 1 min read How to transform child elements to preserve the 3D transformations ? In this article, we will learn how to transform child elements to preserve the 3D transformation. The CSS transform-style property is used to transform child elements to preserve the 3D transformations. The transform-style property is used to specify that the children of an element are positioned i 2 min read Like