Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Default — rotates from centre */ .spinner { transform-origin: center; animation: spin 1s linear infinite; } /* Hinge door — rotate from left edge */ .door { transform-origin: left center; transition: transform 0.5s ease; } .door:hover { transform: perspective(600px) rotateY(-60deg); } /* Scale from top-left corner */ .grow-from-corner { transform-origin: top left; transition: transform 0.3s ease; } .grow-from-corner:hover { transform: scale(1.15); } /* Orbit — origin outside the element */ .planet { transform-origin: 0 200px; /* 200px below the element */ animation: orbit 4s linear infinite; } @keyframes orbit { to { transform: rotate(1turn); } } /* Underline expand from left */ .underline::after { transform-origin: left; transform: scaleX(0); transition: transform 0.3s ease; } .underline:hover::after { transform: scaleX(1); }
Result
Open