Ответ 1
transform-origin изменяет точку, в которой элемент преобразуется, а не перемещает весь элемент (в качестве перевода). Значение по умолчанию - transform-origin: 50% 50%;.
Вот иллюстрация: http://jsfiddle.net/joshnh/73g7t/
Переводить vs transform-origin css3
Мне было интересно, может ли кто-нибудь помочь мне. У меня возникли проблемы с пониманием того, что такое свойство css3: transform-origin. Кажется, я не понимаю, как он движется.
Итак, например, скажем, у вас есть квадрат div, и вы поворачиваете его на 40 градусов. и затем вы выполните transform-origin: 100% 0%. не можете ли вы просто сделать translateX(and some value)? Кажется, что translateX будет перемещать его вдоль оси x относительно вновь повернутой оси после выполнения вращения. Кажется, я не понимаю, что делает происхождение трансформации, или что именно оно есть.
Был бы очень понятен ясный и обстоятельный пример. =)