CSS Transform Origin illustration Example

This demo will show all sides origin rotation of element using css Transform Origin illustration. Demo and download options available.

Demo Download

CreatedSEPTEMBER 12, 2018
Compatible browsersChrome, Firefox, Safari

This demo use all the direction of origin rotation using CSS transform-origin illustration. Find the code snippet below.

HTML Snippet

<div class="origin" style="transform-origin: top left"></div> <div class="origin" style="transform-origin: top center"></div> <div class="origin" style="transform-origin: top right"></div>  <div class="origin" style="transform-origin: center left"></div> <div class="origin" style="transform-origin: center center"></div> <div class="origin" style="transform-origin: center right"></div>  <div class="origin" style="transform-origin: bottom left"></div> <div class="origin" style="transform-origin: bottom center"></div> <div class="origin" style="transform-origin: bottom right"></div>


.origin {   width: 1em;   height: 1em;   font-size: 11vmin;   position: relative;   background: rgba(0,0,0,.4);   animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;   @keyframes spin {     50% { transform: rotate(180deg); }     100% { transform: rotate(360deg); }   }     &:before,   &:after {     content: '';     display: block;     width: 100%;     height: 100%;     position: absolute;     top: 0;     left: 0;     border: solid 1px red;     transform-origin: inherit;     // visibility: hidden;   }    &:before {      animation: inherit;     animation-direction: reverse;      font-size: .12em;     content: attr(style);     display: flex;     text-align: center;     word-break: keep-all;     align-items: center;     z-index: 2;   }    &:after {     background: red;     transform: scale(0.1);    } }   html, body {   background: #00136c; }  .origin {   background: #3b2c85;   background: rgba(133, 207, 203, 0.3); } .origin:before {   border: solid 1px #db3951;   color: rgba(255, 255, 255, 0.8);   z-index: 5; } .origin:after {   background: #db3951; }  *, *::before, *::after {   box-sizing: border-box; }  html {   display: grid;   justify-items: center;   align-items: center;   height: 100%;   overflow: hidden; }  body {   display: grid;   grid-template: repeat(3, auto)/repeat(3, auto);   grid-gap: 1em; } 


CSS Transform Origin illustration Example preview

Latest posts by W3TWEAKS (see all)


Leave a Reply

Your email address will not be published. Required fields are marked *