{"id":3297,"date":"2020-12-29T16:18:58","date_gmt":"2020-12-29T16:18:58","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3297"},"modified":"2023-02-28T05:46:53","modified_gmt":"2023-02-28T05:46:53","slug":"css-tutorial-transform-box-fill-box","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-transform-box-fill-box\/","title":{"rendered":"CSS Tutorial &#8211; Transform-box: Fill-box"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; The\u00a0<strong><code>transform-box<\/code><\/strong>\u00a0CSS property defines the layout box to which the\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\"><code>transform<\/code><\/a>\u00a0and\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-origin\"><code>transform-origin<\/code><\/a> properties relate.<\/p>\n<p>In the CSS we have an animation that uses a transform to rotate the rectangle infinitely.\u00a0<code>transform-box: fill-box<\/code>\u00a0is used to make the\u00a0<code>transform-origin<\/code>\u00a0the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/ZExgYWX?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/ZExgYWX\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"Header\"&gt;\r\n  &lt;svg class=\"Header__svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1337.97 684.43\"&gt;\r\n    &lt;path class=\"Header__shape bigSquare\" fill=\"#16d5d1\" d=\"M546.519 349.271l86.383-56.098 56.097 86.383-86.383 56.098z\"\/&gt;\r\n    &lt;path class=\"Header__shape triangle\" fill=\"none\" stroke=\"#ff4676\" stroke-width=\"8\" d=\"M372.15 462.17L321 434.58l-4.88 56.16z\"\/&gt;\r\n    &lt;circle class=\"Header__shape bigCircle\" fill=\"#ff4676\" cx=\"1076.52\" cy=\"262.17\" r=\"59\"\/&gt;\r\n    &lt;path class=\"Header__shape littleSquare\" fill=\"#ffe430\" d=\"M285.523 262.61l12.372-53.59 53.59 12.372-12.372 53.59z\"\/&gt;\r\n    &lt;circle class=\"Header__shape hoop\" fill=\"none\" stroke=\"#ffe430\" stroke-width=\"13\" cx=\"905.52\" cy=\"447.17\" r=\"45\"\/&gt;\r\n    &lt;circle class=\"Header__shape littleCircle\" fill=\"#0f1c70\"cx=\"1036.52\" cy=\"203.17\" r=\"27\"\/&gt;\r\n  &lt;\/svg&gt;\r\n  &lt;h3 class=\"Header__title\"&gt;Transform-box:fill-box&lt;\/h3&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\"> \/\/ I was rotating an SVG shape within a larger SVG when I noticed that the shape was taking the center of the SVG viewbox as the origin of the transformation rather than its own center. To fix this add transform-box: fill-box to the shape you're rotating.\r\n\r\n\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-box\r\n\r\n.Header__shape {\r\n  animation-duration: 4s;\r\n  animation-timing-function: cubic-bezier(.18,1.17,.03,1.46);\r\n  animation-fill-mode: backwards;\r\n  transform-origin: center;\r\n  \/\/ this here is the good stuff\r\n  transform-box: fill-box;\r\n}\r\n\r\n\r\n\/\/ aaand the rest of the code\r\n\r\nbody {\r\n  background: radial-gradient(#c2c2c2 8%, transparent 8%), white;\r\n  background-position: 0 0, 25px 25px;\r\n  background-size:25px 25px;\r\n  min-height: 100vh;\r\n}\r\n\r\n.Header {\r\n  position: relative;\r\n  min-height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.Header__svg {\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: -1;\r\n  will-change: transform;\r\n}\r\n.Header__title {\r\n  font-family: Avenir, Futura, 'Open Sans', 'Gill Sans', 'Helvetica Neue', Ariel, sans-serif;\r\n  font-weight: bold;\r\n  font-size: 6vw;\r\n  margin: 0;\r\n}\r\n\r\n.bigSquare {\r\n  animation-name: bigSquare;\r\n}\r\n@keyframes bigSquare {\r\n  from { transform: translateY(10%) rotate(-80deg) scale(0); }\r\n  to { transform: translateY(0) rotate(0deg) scale(1); }\r\n}\r\n.littleSquare {\r\n  animation-name: littleSquare;\r\n}\r\n@keyframes littleSquare {\r\n  from { transform: translate(226%, 183%) rotate(140deg) scale(0) ; }\r\n  to { transform: translate(0%, 0%) rotate(0deg) scale(1); }\r\n}\r\n.triangle {\r\n  animation-name: triangle;\r\n}\r\n@keyframes triangle {\r\n  from { transform: rotate(-140deg) scale(0) ; }\r\n  to { transform: rotate(0deg) scale(1); }\r\n}\r\n.hoop {\r\n  animation-name: hoop;\r\n}\r\n@keyframes hoop {\r\n  from { transform: translate(-160%, -33%) scale(0) ; }\r\n  to { transform: translate(0%, 0%) scale(1); }\r\n}\r\n.bigCircle {\r\n  animation-name: bigCircle;\r\n}\r\n@keyframes bigCircle {\r\n  from { transform: scale(0) translate(60%, 3%); }\r\n  to { transform: scale(1) translate(0%, 0%); }\r\n}\r\n.littleCircle {\r\n  animation-name: littleCircle;\r\n}\r\n@keyframes littleCircle {\r\n  from { transform: scale(0) }\r\n  to { transform: scale(1) }\r\n}\r\n\r\n\/\/ some lovely sass fun to stagger the animation\r\n\r\n@for $i from 1 to 12 {\r\n  .Header__shape:nth-child(#{$i}) { \r\n    animation-delay: $i * 0.16s;\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; The\u00a0transform-box\u00a0CSS property defines the layout box to which the\u00a0transform\u00a0and\u00a0transform-origin <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-transform-box-fill-box\/\" title=\"CSS Tutorial &#8211; Transform-box: Fill-box\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[268,197,315,316,103,227],"newstopic":[],"class_list":{"0":"post-3297","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-grid","9":"tag-css-tutorial","10":"tag-keyframes-animation","11":"tag-transform-box","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3297"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3297\/revisions"}],"predecessor-version":[{"id":3299,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3297\/revisions\/3299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3837"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3297"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}