CSS3 трансформации: множественное происхождение?

Question

Можно ли указать начало координат вверху слева (0%, 0%) для масштабирования и другое начало координат (центр) для поворота в CSS3? Я работаю только с webkit, если это поможет.

В настоящее время я использую список преобразований (т.е. -webkit-transform: scale (newScale) rotate (newRotate)

но кажется, что невозможно изменить источник между проходами. Есть ли лучший способ посмотреть на это? В настоящее время, если я масштабирую объект и поворачиваю его с началом координат в центре по умолчанию, положение элемента теперь отключено, и поэтому при перетаскивании элемента курсор все еще находится в верхнем левом углу элемента, тогда как он должен быть в центре. Изменение исходного положения на центр для масштабирования исправляет это, но создает новые проблемы с вращением и поворотом.

Answer 1

Нашел хорошее решение проблемы ... создав отношения между родителями и детьми следующим образом:

<div class="container">
   <img src="" />
</div>

Теперь я могу настроить два класса следующим образом:

.container {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(0.5);
}

.container img {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
}

Это будет делать именно то, что я хочу: масштабировать с началом координат в верхнем левом углу, а затем вращать с началом координат в центре. Voila!

Answer 2

Вместо этого думайте о масштабировании с началом координат (0,0) как масштабирование + перевод с центром происхождения.В отдельности следующее:

-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);

совпадает с:

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);

Теоретически центр начала вращения должен оставлять углы торчащими на sqrt(1/2)-0.5, что требует от нас перемещения источникавниз и вправо на 20.71%, но по какой-то причине алгоритм преобразования webkit перемещает вещи вниз для нас (но не достаточно) и масштабирует происхождение для нас (опять же не совсем).Таким образом, нам нужно переместиться вправо на 50% и внести некоторые коррективы в это странное поведение:

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;

Примечание: мой первоначальный ответ был с использованием div с width:100px; и height100px;, что требуетtranslate3d(54px, 0, 0).

Answer 3

Что насчёт этого: http://jsfiddle.net/22Byh/1/