{"id":673,"date":"2022-05-25T12:19:07","date_gmt":"2022-05-25T12:19:07","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=673"},"modified":"2022-05-25T12:19:09","modified_gmt":"2022-05-25T12:19:09","slug":"css-transform","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-transform\/","title":{"rendered":"CSS Transform"},"content":{"rendered":"<p style=\"text-align: center;\"><strong>CSS Transform Property<\/strong><\/p>\n<p>With transform property we can do different transformations to our element, like moving, rotating, scaling, and skewing some element. This is often useful for our web pages in a variety of ways.<\/p>\n<p>We are first going to observe some 2D transformations and then will move on to some 3D transformations. So, as values for the transform property, we got some functions, which are discussed below.<\/p>\n<p>Here is the list of some functions that we are going to have a look on \u2013<\/p>\n<ul>\n<li>rotate()<\/li>\n<li>translate()<\/li>\n<li>scale()<\/li>\n<li>scaleX()<\/li>\n<li>scaleY()<\/li>\n<li>skew()<\/li>\n<li>skewX()<\/li>\n<li>skewY()<\/li>\n<\/ul>\n<p>Now let\u2019s have a look at these methods one by one.<\/p>\n<p>The rotate() method -&gt;<br \/>\nAs the name says it all, the rotate method is going to help us rotate the element around a 2D plane. It takes value in degrees and helps us rotate the element.<\/p>\n<p>Have a look at the below example. In this example, we are just rotating the div on hover. I have put some transitions as well so that we can see the transformation happen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-674 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property.jpg\" alt=\"\" width=\"486\" height=\"339\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property.jpg 486w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-300x209.jpg 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/p>\n<p>As you can see, when we hover over the div now, it is rotated by the given amount. You can try following along, and opening the file in the browser, to see the output.<\/p>\n<p><strong>The translate() method -&gt;<\/strong><\/p>\n<p>With this method, we can move the element. We have to just give the new X and\/or Y parameters. If we are specifying one value only(which can be either length or percentage), then we are providing just the x coordinate(horizontal). The y-coordinate will be by default set to zero.<\/p>\n<p>If we are specifying two values, then we are providing the x coordinate and the y coordinate.<\/p>\n<p>Have a look at the below example. It will make you understand both syntax and the use of the translate method. This method is simply used for moving\/repositioning the element in the given directions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-675 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-1.jpg\" alt=\"\" width=\"660\" height=\"346\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-1.jpg 660w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-1-300x157.jpg 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Well, here, we are moving the div to 50px in x-direction and 50px in y-direction. You can also try adding some negative values here too. Remember that if you are providing only one value to the function, then it is the x coordinate(horizontal).<\/p>\n<p>Write this code, follow along, and try opening the file into the browser to have a look at the output. When you hover over the div, it translates.<\/p>\n<p><strong>The scaleX() method \u2192<\/strong><\/p>\n<p>The methods related to the scaling, refer to resizing of elements. Here, we are having a look at resizing the element up or down horizontally, using the scaleX method. We are passing some numbers as a parameter, which is the scaling factor to be applied.<\/p>\n<p>With this method, we can simply manipulate the size of the element. The X in the method name specifies that we are going to manipulate the size of the element horizontally. So here, we are going to increase or decrease the size of some elements horizontally.<\/p>\n<p>Please refer to the below program where we resize the div on hover. Have a look at the example, and follow along. Write the code yourself, and observe the output &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-676 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-2.jpg\" alt=\"\" width=\"510\" height=\"333\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-2.jpg 510w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-2-300x196.jpg 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>If you try to open the file in the browser and hover over the div, you can find that the element is now being resized horizontally. We have provided 5 as the scaling factor here. You can try centering the div, or placing it somewhere else, so as to have better visualization of what is happening.<\/p>\n<p>The scaleY() method \u2192<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-678 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-3.jpg\" alt=\"\" width=\"525\" height=\"332\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-3.jpg 525w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-3-300x190.jpg 300w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<p>This method is similar to the above one, the scaleX() method. But this time, we are going to resize(up or down) the element vertically(along the y-axis). So, we can increase or decrease the width of some elements. The below program is similar to the previous program, just the difference is that we are manipulating the height of the div this time. In the example, we are providing the scaling factor as 3.<\/p>\n<p>In the example, we can see that when we hover over the div, it resizes in the vertical direction(Y-axis).<\/p>\n<p><strong>The scale() method \u2192<\/strong><\/p>\n<p>This method is a combination of the scaleX() and the scaleY() method(discussed above), which means that here, we are going to resize the element both vertically and horizontally(on a 2D plane). Have a look at the below example. Y<\/p>\n<p>ou can try manipulating some values in the function to see some differences. Here, arguments 3 and 3 are just similar to the previous method arguments, which means that the horizontal and vertical resizing will be done accordingly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-677 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-4.jpg\" alt=\"\" width=\"447\" height=\"333\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-4.jpg 447w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-4-300x223.jpg 300w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/p>\n<p>So, here we can see that with scale, we are able to resize both horizontally, and vertically. The two values here are for x and y respectively.<\/p>\n<p><strong>The skewX() method \u2192<\/strong><\/p>\n<p>With this method, we can skew the element along its X-axis by a certain given angle. You can understand the skew as if we are tilting the element along the X-axis(horizontal axis) (Not exactly though, but just for understanding). Please refer to the below example, which gives a clear idea of the skewX() method.<\/p>\n<p>Try changing the values, and you will get a clearer picture of what is going on. The input to this method is going to be the angle.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-679 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-5.jpg\" alt=\"\" width=\"457\" height=\"331\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-5.jpg 457w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-5-300x217.jpg 300w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><\/p>\n<p>If you now try to open the HTML file into the browser, upon hovering over the div, we are able to see that the div is now a little bit tilted, by 45 degrees. You can use it if it is required. Similar to this, we also have a function for the Y direction.<\/p>\n<p><strong>The skewY() method \u2192<\/strong><\/p>\n<p>This method is similar to the skewX() method, with the difference that this time, the Y here specifies that we are going to skew the element along its Y-axis(vertical axis) by a certain given angle.<\/p>\n<p>This is again the same as we are tilting the element along the Y-axis (again not exactly but just for our understanding). Please refer to the below code and try implementing it for different values, so that you get a clearer picture of the concept.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-680 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-6.jpg\" alt=\"\" width=\"492\" height=\"335\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-6.jpg 492w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-6-300x204.jpg 300w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/p>\n<p>Observe the output of the given file, trying to open it in the browser. You can observe that when we hover over the div, it is now like tilted a little bit over Y direction.<\/p>\n<p><strong>The skew() method \u2192<\/strong><\/p>\n<p>This method is the combination of the two methods \u2013 skewX() and skewY(). Here, we have to give both angles as parameters to the skew() method, and it will do what both the above functions together would do. Please refer to the below program, which is just a combination of the programs seen separately in skewX and skewY functions.<\/p>\n<p>Try implementing the program with some different set of values and observe the difference in the outputs and try to interpret the different outputs so that you have a clearer picture of the concept in your mind.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-681 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-7.jpg\" alt=\"\" width=\"480\" height=\"335\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-7.jpg 480w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-7-300x209.jpg 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>You can follow along, and observe the output here for the above code.<\/p>\n<p>So, the above discussed were some 2D transformations. Now we are going to see some 3D transformations.<\/p>\n<p>Until now, we were dealing with 2 axes, namely the X-axis and Y-axis, but now we are going to deal with 3, i.e X, Y, and Z. Well, it may not be easy to visualize what is going on in the 3 Dimensions, but still, we will try our best to understand the different things that we can do here.<\/p>\n<p>First of all, we have seen the rotate thing, and we used to rotate our element along the 2D plane. We have separate methods for it as well, like if you want to rotate it in the X direction, or Y direction, or Z direction, or if you want 3D, it is also available. Let&#8217;s check the rotate X function first &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-682 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-8.jpg\" alt=\"\" width=\"463\" height=\"335\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-8.jpg 463w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-8-300x217.jpg 300w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/p>\n<p>Well, if you try to hover over the div now, it may seem that it is being pressed from top and bottom. But it is not like that. It is being rotated over the X-axis(horizontal axis). We can try the same thing with Y-axis as well &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-683 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-9.jpg\" alt=\"\" width=\"452\" height=\"342\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-9.jpg 452w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-9-300x227.jpg 300w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/p>\n<p>Well, now, when we hover over the div, it may seem that the div is being pressed from left and right, but again it is not like that. The element is being rotated along the Y-axis(vertical axis).<\/p>\n<p>Now, let&#8217;s try the rotation with the Z-axis.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-684 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-10.jpg\" alt=\"\" width=\"516\" height=\"335\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-10.jpg 516w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-10-300x195.jpg 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/p>\n<p>As you can see, upon hovering over the div, we can see that it is rotating along Z-axis.<\/p>\n<p>We have a scaleZ function as well, just like the scaleX and scaleY functions. Here, we are simply scaling the element up or down along the z-axis. Have a look at the below example &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-685 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-11.jpg\" alt=\"\" width=\"462\" height=\"333\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-11.jpg 462w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-11-300x216.jpg 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<p>Well, upon hovering over the div, there may not be any effect, since the thing is happening along the z-axis now.<\/p>\n<p>We also have a translateZ function, if we want to reposition the element along the z-axis. Have a look at it &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-686 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-12.jpg\" alt=\"\" width=\"467\" height=\"333\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-12.jpg 467w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/transform-property-12-300x214.jpg 300w\" sizes=\"auto, (max-width: 467px) 100vw, 467px\" \/><\/p>\n<p>Again, here as well, we may not be able to see any effect upon hovering over the div, since it is again happening on the z-axis.<\/p>\n<p>So, in short, if you are willing to do some 3D transformations, we got some methods to do that as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Transform Property With transform property we can do different transformations to our element, like moving, rotating, scaling, and skewing some element. This is often useful for our web pages in a variety of ways. We are first going to observe some 2D transformations and then will move on to some 3D transformations. So, as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13],"class_list":{"0":"post-673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":2,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/673\/revisions"}],"predecessor-version":[{"id":1478,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/673\/revisions\/1478"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}