{"id":7947,"date":"2021-08-14T12:32:50","date_gmt":"2021-08-14T12:32:50","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7947"},"modified":"2022-04-13T16:34:30","modified_gmt":"2022-04-13T16:34:30","slug":"how-to-use-transform-origin-property-in-css","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/","title":{"rendered":"How to use transform-origin property in CSS?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This property is used to change the position of transformed elements. This property must be used together with the transform property. We can set this property to x, y and z axis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2D transformations can change the x and y axis of an element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3D transformations can change the x, y and z axis of an element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Syntax: &#8211;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selector { transform-origin: x-axis y-axis z-axis; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ex: &#8211;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">div { transform-origin: 10%\u00a0\u00a0 20%\u00a0\u00a0\u00a0 30%\u00a0 ; }<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/ajcotocus\/8b7f41bbecbc9b05e74a8f44d7750417.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"578\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png\" alt=\"\" class=\"wp-image-7948\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png 625w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97-300x277.png 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-axis<\/strong>&#8211;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is used to define where the view is placed at the x-axis.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>left<\/li><li>center<\/li><li>right<\/li><li>length (px, cm, em, %)<\/li><li><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">y-axis-<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is used to define where the view is placed at the y-axis.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>top<\/li><li>center<\/li><li>bottom<\/li><li>length (px, cm, em, %)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">z-axis-<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is used to define where the view is placed at the z-axis.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>length (px, cm, em, %)<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">transform-style-<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">This property is used to specify how nested elements are rendered in 3D space. This property must be used together with the transform property. We can set this property to flat (default) and preserve-3d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E<strong>x: &#8211;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">div { transform-style: preserve-3d ; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note &#8211;<\/strong> child elements will preserve its 3D position<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/ajcotocus\/b85f986f360d6e7e057c5426bf652457.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"435\" height=\"880\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-98.png\" alt=\"\" class=\"wp-image-7949\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-98.png 435w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-98-148x300.png 148w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This property is used to change the position of transformed elements. This property must be used together with the transform [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5309],"tags":[5134,4459,5310,6311,6312,6313,6314],"class_list":["post-7947","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-html","tag-property","tag-transform-origin","tag-x-axis","tag-y-axis","tag-z-axis"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use transform-origin property in CSS? - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use transform-origin property in CSS? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"This property is used to change the position of transformed elements. This property must be used together with the transform [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-14T12:32:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:34:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How to use transform-origin property in CSS?\",\"datePublished\":\"2021-08-14T12:32:50+00:00\",\"dateModified\":\"2022-04-13T16:34:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/\"},\"wordCount\":186,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/image-97.png\",\"keywords\":[\"css\",\"HTML\",\"property\",\"transform-origin\",\"x-axis\",\"y-axis\",\"z-axis\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/\",\"name\":\"How to use transform-origin property in CSS? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/image-97.png\",\"datePublished\":\"2021-08-14T12:32:50+00:00\",\"dateModified\":\"2022-04-13T16:34:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/image-97.png\",\"contentUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/image-97.png\",\"width\":625,\"height\":578},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-transform-origin-property-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use transform-origin property in CSS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use transform-origin property in CSS? - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How to use transform-origin property in CSS? - scmGalaxy","og_description":"This property is used to change the position of transformed elements. This property must be used together with the transform [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/","og_site_name":"scmGalaxy","article_published_time":"2021-08-14T12:32:50+00:00","article_modified_time":"2022-04-13T16:34:30+00:00","og_image":[{"url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png","type":"","width":"","height":""}],"author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How to use transform-origin property in CSS?","datePublished":"2021-08-14T12:32:50+00:00","dateModified":"2022-04-13T16:34:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/"},"wordCount":186,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png","keywords":["css","HTML","property","transform-origin","x-axis","y-axis","z-axis"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/","name":"How to use transform-origin property in CSS? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png","datePublished":"2021-08-14T12:32:50+00:00","dateModified":"2022-04-13T16:34:30+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#primaryimage","url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png","contentUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/08\/image-97.png","width":625,"height":578},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-transform-origin-property-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How to use transform-origin property in CSS?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7947"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7947\/revisions"}],"predecessor-version":[{"id":7950,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7947\/revisions\/7950"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}