Как мне понять объяснение Transform-Origin в MDN? ⇐ CSS

[Anonymous]

Я вижу следующее объяснение Transform-Origin из MDN.

По сути, это свойство оборачивает пару переводов вокруг других преобразований элемента. Первый перевод перемещает начало координат преобразования в истинное начало координат (0,0). Затем применяются другие преобразования, и поскольку начало преобразования находится в
(0,0), эти преобразования действуют относительно начала преобразования. Наконец, применяется противоположный перевод, возвращающий начало преобразования в исходное местоположение.

Я не понимаю, что означает «истинное начало»? Насколько я понимаю, в этом документе говорится примерно следующее.

Код: Выделить всё

.apply1 {
transform-origin: 100% 100%;
transform: rotate(45deg);
}

/* .apply1 is equivalent to .apply2*/

.apply2 {
transform-origin: 0 0;
transform: translate(100%, 100%) rotate(45deg) translate(-100%, -100%);
}

Процесс применения1:

• set Transform-origin: 0 0;
• добавьте преобразование, выполнив следующие действия:(1. Добавьте преобразование со значением исходного преобразования-origin. (2. примените все повороты) и масштабировать преобразования (3. добавить преобразование со значением, противоположным исходному значению Transform-origin)

Думаю. мое понимание верно, потому что я могу получить тот же результат, применив apply1 и apply2. Однако я не понимаю, почему эти шаги дают тот же результат, что и просто вообразить гвоздь, закрепленный в правом нижнем углу, а затем вращающийся. квадрат 45 градусов?
Я знаю, что у меня ужасная математика, пожалуйста, простите меня...

Подробнее здесь: https://stackoverflow.com/questions/787 ... gin-on-mdn