transform-origin

transform-origin: center; 

transform-origin: top left; 

transform-origin: 50px 50px; 

/* 3D rotation with z-axis origin */ transform-origin: bottom right 60px; 

<section id="default-example"> <div id="example-container"> <div id="example-element">Rotate me!</div> <img alt="" id="crosshair" src="/shared-assets/images/examples/crosshair.svg" width="24px" /> <div id="static-element"></div> </div> </section> 

@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(30deg); } } @keyframes rotate3d { from { transform: rotate3d(0); } to { transform: rotate3d(1, 2, 0, 60deg); } } #example-container { width: 160px; height: 160px; position: relative; } #example-element { width: 100%; height: 100%; display: flex; position: absolute; align-items: center; justify-content: center; background: #f7ebee; color: #000000; font-size: 1.2rem; text-transform: uppercase; } #example-element.rotate { animation: rotate 1s forwards; } #example-element.rotate3d { animation: rotate3d 1s forwards; } #crosshair { width: 24px; height: 24px; opacity: 0; position: absolute; } #static-element { width: 100%; height: 100%; position: absolute; border: dotted 3px #ff1100; } 

"use strict"; window.addEventListener("load", () => { function update() { const selected = document.querySelector(".selected"); /* Restart the animation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */ el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = el.style.transformOrigin.split(" ")[2] === "60px" ? "rotate3d" : "rotate"; }); }); const transformOrigin = getComputedStyle(el).transformOrigin; const pos = transformOrigin.split(/\s+/); crosshair.style.left = `calc(${pos[0]} - 12px)`; crosshair.style.top = `calc(${pos[1]} - 12px)`; } const crosshair = document.getElementById("crosshair"); const el = document.getElementById("example-element"); const observer = new MutationObserver(() => { update(); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); update(); crosshair.style.opacity = "1"; }); 

/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* Global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset;