CSS transform origin

Summary: In CSS, the transform-origin defines where an element is transformed in relation to its parent. The default CSS transform origin is 50% from the left and 50% from the top of an element’s coordinate space. This means that if you applied a CSS transformation to an element (e.g., translateX()), then it would be translated by half of its width on both axis or one-quarter of its height on both axes.

What is css transform origin:

css transform origin can be set as a length, percentage, or keyword value. The default CSS transform origin is 50% from the left and 50% from the top of an element’s coordinate space which means that if you applied a CSS transformation to an element (e.g., translateX()), then it would be translated by half of its width on both axis or one-quarter of its height on both axes.

Syntax:

transform-origin: Top | Left | Right | Bottom

Example:

HTML
<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>

CSS:
.origin {
  width: 1em;
  height: 1em;
  font-size: 13vmin;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  -webkit-animation: spin 6s cubic-bezier(0.8, 0, 0.2, 1) infinite;
          animation: spin 6s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@-webkit-keyframes spin {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.origin:before, .origin:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: solid 1px red;
  transform-origin: inherit;
}
.origin:before {
  -webkit-animation: inherit;
          animation: inherit;
  animation-direction: reverse;
  text-shadow: 0 1px 0 #000;
  font-size: 0.11em;
  font-family: "JetBrains Mono", monospace;
  padding: 0.2em;
  content: attr(style);
  display: flex;
  text-align: center;
  word-break: keep-all;
  align-items: center;
  z-index: 2;
}
.origin: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;
}
View SCSS Code
Resources
{"mode":"full","isActive":false}

Breakdown of above code:

So, what’s the transform-origin property? It specifies a point on an element as its center of transformation. Transformations applied to that object will be translated so they originate from this origin before being scaled or rotated with other transformations. For instance, if you want all parts of your element to rotate around it like wheels and not just those at one end, then setting the x and y values in percentage is key!

HTML
<div class="box"></div>

<button>click me</button>

CSS
.box {
  background: lightblue;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transition: transform 1s linear;
  transform-origin: top left;
  transform-style: preserve-3D;
}

.box-rotate {
  transform: rotate(360deg);
}

button {
  display: block;
  margin: auto;
}

Script
$('button').click(function () {

  $('.box').toggleClass('box-rotate');

});

A great way to add some visual interest is by adding a little movement. In this passage, I’m going to show you how the box at an angle can be done in CSS with just one line of code! All it takes are two lines and then we’ll set up our click event Transition so that on-click (or tap) the transform property will rotate the element around its x-axis 360 degrees over 1-second duration before resetting back to 0-degree rotation as if nothing ever happened.

Browser Support:

Browser support for css transform origin is: Firefox 57+, Safari 12.1+, Opera 54+, Chrome 69+

Conclusion:

The Transform Origin property allows you to define the coordinates of where an element should be translated, rotated, or scaled. If this sounds like something that might help your design process in some way, we can help! Contact us for a free consultation and let’s see if there’s anything else we can do to make sure your website is as effective as possible.

Also Read: CSS top property

Follow us on Facebook

Leave a Comment