Любой способ визуализации точки происхождения преобразования в CSS?

Question

Я пытаюсь сделать объект движением вдоль дуги, для чего мне нужно установить transform-origin точку от самого объекта, а затем rotate. Поэтому вместо слепого перемещения точки transform-origin с использованием разных длин, а затем, наконец, достижения желаемого результата путем проб и ошибок, есть ли способ сделать точку видимой для облегчения процесса?

Answer 1

По умолчанию начало преобразования составляет «50% 50%», которое находится точно в центре любого данного элемента. Изменение источника на «верхний левый» (как показано выше в демо) заставляет элемент использовать верхний левый угол элемента в качестве точки поворота.

Значения могут быть длиной, процентами или ключевыми словами сверху, слева, справа, снизу и в центре.

Первое значение - это горизонтальное положение, второе значение - вертикальное, а третье значение представляет положение по оси Z. Третье значение будет работать, только если вы используете 3D-преобразования, и это не может быть процентным.

#div1 { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 100px; 
 
    
 
    border: 1px solid black; 
 
} 
 

 
#div2 { 
 
    padding: 50px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    background-color: #454545; 
 
    -ms-transform: rotate(45deg); /* IE 9 */ 
 
    -ms-transform-origin: 20% 40%; /* IE 9 */ 
 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
 
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */ 
 
    transform: rotate(40deg); 
 
    transform-origin: 0px 0px; /* 0,0 indicates top left corner*/ 
 
}

<div id="div1"> 
 
    <div id="div2">HELLO</div> 
 
</div>

Для дальнейшего refrence

Answer 2

Вы можете добавить помощника с помощью CSS. Просто добавьте следующий фрагмент к элементу, которому вы устанавливаете свойство transform-origin, где значение x для начала преобразования совпадает с левым значением для хелпера, а значение y совпадает с верхним значением.

.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%); 
}