{"id":2753,"date":"2012-03-05T21:59:51","date_gmt":"2012-03-05T16:29:51","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2753"},"modified":"2012-03-05T21:59:51","modified_gmt":"2012-03-05T16:29:51","slug":"complete-css-3-tutorial-transform-operations","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/complete-css-3-tutorial-transform-operations\/","title":{"rendered":"Complete CSS 3 Tutorial &#8211; Transform Operations"},"content":{"rendered":"<p style=\"text-align: justify;\"><strong>Cascading Style Sheet (CSS)<\/strong> is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.<\/p>\n<p style=\"text-align: justify;\">With the help of CSS 3 other than just style now we can even animate, translate and do lots of stuff which were not possible by the CSS 2 and needed the help of other\u00a0JavaScript\u00a0library like JQuery UI.<\/p>\n<p style=\"text-align: justify;\">In this tutorial we are going to learn different transform operations supported by the CSS 3.<\/p>\n<p style=\"text-align: justify;\">The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.<\/p>\n<h3><a title=\"CSS3 Live Demo - Tutorial - Transform Operations\" href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/demos\/CSS3\/2D%20Transform.html\">Live Demo &#8211; Click Here.<\/a><\/h3>\n<p><!--more--><\/p>\n<p><strong>1. rotate() method<\/strong><\/p>\n<p>Using this method, we can rotate any element for the specified degree from 0 to 360 having positive or negative value.<\/p>\n<p>Example:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntransform: rotate(-10deg);\n-ms-transform: rotate(-10deg); \/* IE 9 *\/\n-webkit-transform: rotate(-10deg); \/* Safari and Chrome *\/\n-o-transform: rotate(-10deg); \/* Opera *\/\n-moz-transform: rotate(-10deg); \/* Firefox *\/\n<\/pre>\n<p>In above code snippet, we have to supply the degree to which element should be rotated. Instead of -10, we can also supply the 350 which will give the same result.<\/p>\n<figure id=\"attachment_2754\" aria-describedby=\"caption-attachment-2754\" style=\"width: 531px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2754\" title=\"CSS 3 Tutorial Rotate\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=531%2C140&#038;ssl=1\" alt=\"CSS 3 Tutorial Rotate\" width=\"531\" height=\"140\" \/><\/a><figcaption id=\"caption-attachment-2754\" class=\"wp-caption-text\">CSS 3 Tutorial Rotate<\/figcaption><\/figure>\n<p>In CSS3, we have to explicitly specify the filters for different browsers so that they can understand the property.<\/p>\n<ul>\n<li>&#8220;<strong>-ms-<\/strong>&#8221; stands for Microsoft Internet Explorer<\/li>\n<li>&#8220;<strong>-webkit-<\/strong>&#8221; stands for Safari and Chrome<\/li>\n<li>&#8220;<strong>-o-<\/strong>&#8221; stands for Opera<\/li>\n<li>&#8220;<strong>-moz-<\/strong>&#8221; stands for Mozilla<\/li>\n<\/ul>\n<p><strong>2. translate() method<\/strong><\/p>\n<p>This function causes to move the element from iths original position to specified x and y parameter. This method requires two parameters in which first means transform from x axis and second means transform from y axis.<\/p>\n<p>Other Methods:<br \/>\n<strong>translateX(n)<\/strong> &#8211; Defines a 2D translation, moving the element along the X-axis<br \/>\n<strong>translateY(n)<\/strong> &#8211; Defines a 2D translation, moving the element along the Y-axis<\/p>\n<figure id=\"attachment_2755\" aria-describedby=\"caption-attachment-2755\" style=\"width: 672px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Translate.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\" wp-image-2755 \" title=\"CSS 3 Tutorial Translate\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Translate.png?resize=672%2C45&#038;ssl=1\" alt=\"CSS 3 Tutorial Translate\" width=\"672\" height=\"45\" \/><\/a><figcaption id=\"caption-attachment-2755\" class=\"wp-caption-text\">CSS 3 Tutorial Translate<\/figcaption><\/figure>\n<p>Example :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntransform: translate(300px,40px);\n-ms-transform: translate(300px,40px); \/* IE 9 *\/\n-webkit-transform: translate(300px,40px); \/* Safari and Chrome *\/\n-o-transform: translate(300px,40px); \/* Opera *\/\n-moz-transform: translate(300px,40px); \/* Firefox *\/\n<\/pre>\n<p><strong>3. scale() Method<\/strong><br \/>\nThis method is used to increase or decrease the size of the element. any value less than 1 means decrease and any value greater than 1 means increase in size. This method also requires two parameter, first is for the width (x-axis) and second for the height (y-axis).<\/p>\n<figure id=\"attachment_2756\" aria-describedby=\"caption-attachment-2756\" style=\"width: 546px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Scale.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2756\" title=\"CSS 3 Tutorial Scale\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Scale.png?resize=546%2C100&#038;ssl=1\" alt=\"CSS 3 Tutorial Scale\" width=\"546\" height=\"100\" \/><\/a><figcaption id=\"caption-attachment-2756\" class=\"wp-caption-text\">CSS 3 Tutorial Scale<\/figcaption><\/figure>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntransform: scale(1,2);\n-ms-transform: scale(1,2); \/* IE 9 *\/\n-webkit-transform: scale(1,2); \/* Safari and Chrome *\/\n-o-transform: scale(1,2); \/* Opera *\/\n-moz-transform: scale(1,2); \/* Firefox *\/\n<\/pre>\n<p><strong>4. skew() method<\/strong><br \/>\nUsing this method, element turned on given angle on the basis of x and y parameters. This method requires two parameters, first is the angle for x-axis and second is angle for y-axis.<\/p>\n<figure id=\"attachment_2757\" aria-describedby=\"caption-attachment-2757\" style=\"width: 542px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Skew.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2757\" title=\"CSS 3 Tutorial Skew\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Skew.png?resize=542%2C144&#038;ssl=1\" alt=\"CSS 3 Tutorial Skew\" width=\"542\" height=\"144\" \/><\/a><figcaption id=\"caption-attachment-2757\" class=\"wp-caption-text\">CSS 3 Tutorial Skew<\/figcaption><\/figure>\n<p>Other Methods:<br \/>\n<strong>skewX(angle)<\/strong> &#8211; Defines a 2D skew transformation along the X-axis<br \/>\n<strong>skewY(angle)<\/strong> &#8211; Defines a 2D skew transformation along the Y-axis<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntransform: skew(20deg,10deg);\n-ms-transform: skew(20deg,10deg); \/* IE 9 *\/\n-webkit-transform: skew(20deg,10deg); \/* Safari and Chrome *\/\n-o-transform: skew(20deg,10deg); \/* Opera *\/\n-moz-transform: skew(20deg,10deg); \/* Firefox *\/\n<\/pre>\n<p><strong>5. matrix()<\/strong><\/p>\n<p>This is the combination of all above methods and takes 6 parameters.<\/p>\n<figure id=\"attachment_2758\" aria-describedby=\"caption-attachment-2758\" style=\"width: 536px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-matrix.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2758\" title=\"CSS 3 Tutorial matrix\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-matrix.png?resize=536%2C178&#038;ssl=1\" alt=\"CSS 3 Tutorial matrix\" width=\"536\" height=\"178\" \/><\/a><figcaption id=\"caption-attachment-2758\" class=\"wp-caption-text\">CSS 3 Tutorial matrix<\/figcaption><\/figure>\n<p><a title=\"CSS 3 Matrix\" href=\"http:\/\/www.useragentman.com\/blog\/2011\/01\/07\/css3-matrix-transform-for-the-mathematically-challenged\/\" rel=\"nofollow\" target=\"_blank\">Read in detail about matrix() method of css3<\/a><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntransform:matrix(1,0.25,-0.25,1,0,0);\n-ms-transform:matrix(1,0.25,-0.25,1,0,0); \/* IE 9 *\/\n-moz-transform:matrix(1,0.25,-0.25,1,0,0); \/* Firefox *\/\n-webkit-transform:matrix(1,0.25,-0.25,1,0,0); \/* Safari and Chrome *\/\n-o-transform:matrix(1,0.25,-0.25,1,0,0); \/* Opera *\/\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Complete CSS 3 Tutorial &#8211; Transform Operations &#8211; rotate, translate, scale, skew and matrix methods with Live Demo and source code<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[67,68],"class_list":["post-2753","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-css-3"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2856,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/css-3-tutorial-rounded-corner-and-shadow-border-effect\/","url_meta":{"origin":2753,"position":0},"title":"CSS 3 Tutorial &#8211; Rounded Corner and Shadow Border effect","author":"Jitendra","date":"May 16, 2012","format":false,"excerpt":"Style the Border in HTML with the Help of CSS 3 Border Style","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"CSS 3 Border - Rounded Corner","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/CSS-3-Border-Rounded-Corner.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/CSS-3-Border-Rounded-Corner.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/CSS-3-Border-Rounded-Corner.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2173,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-pure-css-based-menu-step-by-step-tutorial\/","url_meta":{"origin":2753,"position":1},"title":"Create Pure CSS based Menu &#8211; Step by Step Tutorial","author":"Jitendra","date":"May 23, 2011","format":false,"excerpt":"Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Pure CSS based menu","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-menu.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6133,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/","url_meta":{"origin":2753,"position":2},"title":"Text Slider Lightning Component for Salesforce  with Live Demo","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Text Slider Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2136,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/complete-css-selector-tutorial-for-the-beginners\/","url_meta":{"origin":2753,"position":3},"title":"Complete CSS Selector Tutorial for the beginners","author":"Jitendra","date":"May 19, 2011","format":false,"excerpt":"Complete CSS Selector Tutorial for the beginners","rel":"","context":"In &quot;Web Technology&quot;","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5717,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","url_meta":{"origin":2753,"position":4},"title":"Flipcard Lightning Component","author":"Jitendra","date":"September 8, 2016","format":false,"excerpt":"A simple CSS based animated Flip card Lightning Component for beginners","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flipcard Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":71,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/style-file-upload-control-in-asp-html\/","url_meta":{"origin":2753,"position":5},"title":"Style File upload control in ASP \/ HTML","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"As most of us know that we cannot style the file upload control to much level, still we can give it a stunning effect with the help of CSS. There is nothing in code to explain. I took three upload control and one button to give effect. Lets say upload\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Output in Chrom","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Output-in-Chrom-300x82.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2753"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2753\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}