{"id":17442,"date":"2012-07-09T12:15:04","date_gmt":"2012-07-09T19:15:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17442"},"modified":"2021-07-14T12:01:10","modified_gmt":"2021-07-14T19:01:10","slug":"transform-origin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/","title":{"rendered":"transform-origin"},"content":{"rendered":"\n<p>The <code>transform-origin<\/code> property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transform: rotate(360deg);\n  transform-origin: top left;\n}<\/code><\/pre>\n\n\n\n<p>As indicated above, the <code>transform-origin<\/code> property can take up to two space-separated keyword or length values for a 2D transform and up to three values for a 3D transform.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Using the code above on a 200px by 200px box, with the transform applied to a transitioned using a click event, would behave like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_niurC\" src=\"\/\/codepen.io\/anon\/embed\/niurC?height=450&amp;theme-id=1&amp;slug-hash=niurC&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed niurC\" title=\"CodePen Embed niurC\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>By default, the origin of a transform is &#8220;50% 50%&#8221;, which is exactly in the center of any given element. Changing the origin to &#8220;top left&#8221; (as in the demo above) causes the element to use the top left corner of the element as a rotation point.<\/p>\n\n\n\n<p>Values can be lengths, percentages or the keywords <code>top<\/code>, <code>left<\/code>, <code>right<\/code>, <code>bottom<\/code>, and <code>center<\/code>.<\/p>\n\n\n\n<p>The first value is the horizontal position, the second value is the vertical, and the third value represents the position on the Z axis. The third value will only work if you are using 3D transforms, and it cannot be a percentage.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pOVKjb\" src=\"\/\/codepen.io\/anon\/embed\/pOVKjb?height=450&amp;theme-id=1&amp;slug-hash=pOVKjb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pOVKjb\" title=\"CodePen Embed pOVKjb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">3.5+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">All<\/abbr><\/td><td class=\"has-text-align-center\" data-align=\"center\">11.5+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">91+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_transform-origin\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-17442\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\">\n      perspective    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective: 1000px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/transform\/\" rel=\"tag\">transform<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/transform-origin\/\" rel=\"tag\">transform-origin<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17442\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\">\n      perspective-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective-origin: 25% 75%; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/transform\/\" rel=\"tag\">transform<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/transform-origin\/\" rel=\"tag\">transform-origin<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17442\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 27, 2023  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\">\n      transform    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform: scale(2); }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/transform\/\" rel=\"tag\">transform<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/transform-origin\/\" rel=\"tag\">transform-origin<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17442\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/\">\n      transform-style    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform-style: preserve-3d; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/transform\/\" rel=\"tag\">transform<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/transform-origin\/\" rel=\"tag\">transform-origin<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform. As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up to three values for a 3D transform.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1147,1491],"acf":[],"jetpack-related-posts":[{"id":356179,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/rotate\/","url_meta":{"origin":17442,"position":0},"title":"rotate","date":"November 8, 2021","format":false,"excerpt":"The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, gradian, radian, and turn values. .element { rotate: 45deg; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-favicon-rotate.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":17442,"position":1},"title":"Useful CSS3 Less Mixins","date":"December 16, 2011","format":false,"excerpt":".text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0,\u2026","rel":"","context":"With 51 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356211,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/translate\/","url_meta":{"origin":17442,"position":2},"title":"translate","date":"November 9, 2021","format":false,"excerpt":"The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axes, similar to how you might think of moving an element using offsets, like top, bottom, left, and right. .element { translate:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":250613,"url":"https:\/\/css-tricks.com\/snippets\/css\/star-wars-crawl-text\/","url_meta":{"origin":17442,"position":3},"title":"Star Wars Crawl Text","date":"January 31, 2017","format":false,"excerpt":"The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand new at the time. We can achieve a similar effect\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/crawl.png?fit=1200%2C693&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":241941,"url":"https:\/\/css-tricks.com\/snippets\/css\/orientation-lock\/","url_meta":{"origin":17442,"position":4},"title":"Orientation Lock","date":"May 21, 2016","format":false,"excerpt":"@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; overflow-x: hidden; position: absolute; top: 100%; left: 0; } } Sent in by Andreas Gotfredsen.","rel":"","context":"With 17 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","url_meta":{"origin":17442,"position":5},"title":"scale","date":"November 10, 2021","format":false,"excerpt":"The scale property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17442"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17442"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17442\/revisions"}],"predecessor-version":[{"id":344726,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17442\/revisions\/344726"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17442"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}