{"id":1311,"date":"2013-09-26T23:54:15","date_gmt":"2013-09-26T23:54:15","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1311"},"modified":"2017-06-16T03:46:26","modified_gmt":"2017-06-16T03:46:26","slug":"how-to-use-css3-2d-property","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2013\/09\/how-to-use-css3-2d-property\/","title":{"rendered":"How to use CSS3 2d property?"},"content":{"rendered":"<ul>\n<li><span class=\"phpmind_text_heading_green\">2d transforms: <\/span>The CSS3 transform property help web designers to give style to their html page. Now they are not dependent on images and javascript to create animated box or elements. One can easily translate, rotate, scale, or skew any element on the page and give it a fancy look.<\/li>\n<li>Browser support: All the modern browsers like Firefox, Opera and IE 10 support the transform property.Add prefix -webkit- for chrome and safari.\n<p>Add prefix -ms- for IE9.<\/li>\n<li>\n<ol>\n<li><span class=\"phpmind_text_heading_green\">Translate: <\/span>We need to specify two values in translate function. The first value is the x axis and the second value is the y axis. This property helps us to move the element in any direction without affecting the flow of the document.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1312\" alt=\"phpmind_translate_eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_translate_eg.jpg\" width=\"269\" height=\"205\" \/><\/p>\n<pre lang=\"php\">.div{\r\n\ttransform:translate(110px,45px);\r\n        -webkit-transform:translate(110px,45px); \/* Safari and Chrome *\/\r\n        -ms-transform:translate(110px,45px); \/* TO SUPPORT INTERNET EXPLORER 9 *\/\t\r\n\tbackground:#00CC66;\r\n\twidth:100px;\r\n\theight:100px;\r\n\t}<\/pre>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">Rotate: <\/span>The rotate transform function helps us to rotate a div. The positive value will rotate it in a clockwise direction and the negative value will rotate it in an anti clockwise direction. Values are mentioned in degrees.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1315\" alt=\"phpmind_rotate_eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_rotate_eg.jpg\" width=\"269\" height=\"205\" \/><\/p>\n<pre lang=\"php\">.div{\r\n\ttransform: rotate(50deg);\r\n        -webkit-transform: rotate(50deg); \/* Safari and Chrome *\/\r\n        -ms-transform: rotate(50deg); \/* TO SUPPORT INTERNET EXPLORER 9 *\/\t\r\n\tbackground:#00CC66;\r\n\twidth:100px;\r\n\theight:100px;\r\n\t}<\/pre>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">Scale: <\/span>This method is used to scale an element. We can easily increase or decrease the size of an old div to the new div. The first value is the x axis and the second value is the y axis.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1316\" alt=\"phpmind_scale_eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_scale_eg.jpg\" width=\"269\" height=\"205\" \/><\/p>\n<pre lang=\"php\">.div{\r\n\ttransform: scale(1.5,1.5);\r\n        -webkit-transform: scale(1.5,1.5); \/* Safari and Chrome *\/\r\n        -ms-transform: scale(1.5,1.5); \/* TO SUPPORT INTERNET EXPLORER 9 *\/\t\r\n\tbackground:#00CC66;\r\n\twidth:100px;\r\n\theight:100px;\r\n\t}<\/pre>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">Skew: <\/span>The skew function bends the element. The first value specifies the skew on x axis and the second value specifies the skew on the y axis.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1317\" alt=\"phpmind_skew_eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_skew_eg.jpg\" width=\"269\" height=\"205\" \/><\/p>\n<pre lang=\"php\">.div{\r\n\ttransform: skew(20deg, 20deg);\r\n        -webkit-transform: skew(20deg, 20deg); \/* Safari and Chrome *\/\r\n        -ms-transform: skew(20deg, 20deg); \/* TO SUPPORT INTERNET EXPLORER 9 *\/\t\r\n\tbackground:#00CC66;\r\n\twidth:100px;\r\n\theight:100px;\r\n\t}<\/pre>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">Matrix: <\/span>It is the combination of all the above methods. As the name suggests, values are in the matrix format which helps us to skew, rotate, scale and transform the element.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1313\" alt=\"phpmind_matrix_eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_matrix_eg.jpg\" width=\"269\" height=\"205\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1314\" alt=\"phpmind_matrix_eg_I\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_matrix_eg_I.jpg\" width=\"357\" height=\"116\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_matrix_eg_I.jpg 357w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/09\/phpmind_matrix_eg_I-300x97.jpg 300w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/p>\n<pre lang=\"php\">.div{\r\n\ttransform: skew(20deg, 20deg);\r\n        -webkit-transform: skew(20deg, 20deg); \/* Safari and Chrome *\/\r\n        -ms-transform: skew(20deg, 20deg); \/* TO SUPPORT INTERNET EXPLORER 9 *\/\t\r\n\tbackground:#00CC66;\r\n\twidth:100px;\r\n\theight:100px;\r\n\t}<\/pre>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>2d transforms: The CSS3 transform property help web designers to give style to their html page. Now they are not dependent on images and javascript to create animated box or elements. One can easily translate, rotate, scale, or skew any element on the page and give it a fancy look. Browser support: All the modern [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1311","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1311"}],"version-history":[{"count":3,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1311\/revisions"}],"predecessor-version":[{"id":1322,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1311\/revisions\/1322"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}