Преобразования CSS3: несколько источников?

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

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

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


css css-transforms webkit
person David    schedule 20.01.2012    source источник

Ответы (3)


arrow_upward
13
arrow_downward

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

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

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

person David    schedule 22.01.2012
comment
+1 за решение -1 за ненужную разметку. Это похоже на проблему с дизайном этих правил webkit. - person Jesse Hattabaugh; 05.09.2012
comment
Ваш комментарий не помогает никому arkanciscan. Он отвечает на вопрос в том виде, в каком он реализован в настоящее время. У вас есть другое предложение внести свой вклад? - person David Bradbury; 16.02.2013
comment
Обратите внимание: если у родителя есть scale, то дочерняя позиция transform-origin по-прежнему основывается на исходном размере (размер до масштаба). - person Duannx; 07.12.2017

arrow_upward
1
arrow_downward

Вместо этого подумайте о масштабировании с исходной точкой (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).

person Brett Pontarelli    schedule 20.01.2012
comment
Бретт, я знаком с переводом, чтобы переместить исходную точку, масштабировать, а затем перевести обратно, но это для меня в новинку. Как работает перевод в конце? Является ли 54px примером ширины/2 актива? Извините, пытаюсь разобраться в этом... - person David; 21.01.2012
comment
Обратите внимание, как масштабирование с исходной точкой (0,0) перемещает центр объекта по мере его масштабирования? Тогда это то же самое, что масштабирование с исходной точкой (50%, 50%) при одновременном перемещении объекта. - person Brett Pontarelli; 24.01.2012

arrow_upward
0
arrow_downward

Как насчет этого: http://jsfiddle.net/22Byh/1/

person dfsq    schedule 20.01.2012
comment
Это чертовски хорошая идея, но, похоже, выполняется только последнее из двух преобразований. Если вы поднимете скаляр до 2.0+, чтобы вы действительно могли его увидеть, вы заметите, что он не масштабируется. Если вы измените порядок, чтобы шкала выполнялась второй, она не вращалась. Я что-то упускаю? - person David; 21.01.2012