Any way to visualize the transform origin point in CSS?

Question

I'm trying to make an object move along an arc, for which I need to set the transform-origin point away from the object itself and then rotate it. So instead of blindly moving the transform-origin point using different lengths and then finally achieving the desired result through trial and error, is there a way to make the point visible to make the process easier?

Answer 1

You could add a helper with CSS. Just add following snippet to the element you set your transform-origin property to, where the x value for transform-origin is same as the left value for the helper and y value is same as top value.

.foo {
  position: relative;
  transform-origin: 0 100%;
}

.foo::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 5px;
  height: 5px;
  content: '';
  background-color: #f0f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

Here is a solution I use to visualize transform-origin. Try to change transform-origin value on a DIV element. You will see a semitransparent point adjusted. The drawback of this method is that you have to set position: relative to a parent element.

div {
  position: relative;
  margin: 100px;
  width: 40px;
  height: 30px;
  background: #ccc;
  transform-origin: bottom left;
  animation: rotate 1s linear infinite;
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.001);
  transform-origin: inherit;
}

span::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255,128,128,0.75);
  transform: scale(1000);
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div>
  <span></span>
</div>

transform-origin is necessary for scale and rotation transformations only. The meaning of it for scale is a point where an object is growing from (for scale-in) or a point where an object should be shrinked to (for scale-out). So, at first I shrink a SPAN to almost zero size, then I grow a semitransparent element (SPAN::AFTER) from this point.

https://codepen.io/vbarbarosh/pen/eaQLeJ

Answer 3

I wasn't too happy with given answers, so I tried this:

Html:

<div>
  <span class="x-axis"></span>
  <span class="y-axis"></span>
</div>

And css:

:root {
    --x-origin: 85.36%;
    --y-origin: 85.36%;
}

div {
    position: relative;
    margin: 300px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ccc;
    transform-origin: var(--x-origin) var(--y-origin);
    animation: rotate 4000ms linear infinite;
}

.y-axis {
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: inherit;
    transform: translate(0%, var(--y-origin)) rotate3d(0, 1, 0, 89.4deg);
    background: rgba(255,128,128,0.75);
}

.x-axis {
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: inherit;
    background: rgba(128,128,255,0.75);
    transform: translate(var(--x-origin), 0%) rotate3d(1, 0, 0, 89.4deg);
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Codepen

The main idea is to get the posibility to visualize projected animation of any element by placing those two spans inside of it. The target element content should be commented during test.