Сложные преобразования масштаба и поворота искажают содержимое - PullRequest
Новая
       26

Сложные преобразования масштаба и поворота искажают содержимое

0 голосов
/ 16 января 2012

В CSS3 я пытаюсь сделать это: 

<div style="position:absolute; 
            left:300px;
            top:300px;
            width:100px; 
            height:50px;
            border:1px solid black; 
            transform: scaleX(2) scaleY(1) rotate(45deg);  ">
    Lorem ipsum dolor sit amet.
</div>

Демоверсия : http://jsfiddle.net/m5ESH/1/

Насколько я понимаю, он должен сначала масштабировать растр / векторы до 200% по горизонтали и до 100% по вертикали, а затем применить второе преобразование к этому новому растру, то есть повернуть каждую точку на 45 градусов.

Однако обратите внимание, что углы в 90 градусов (граница: сплошной 1px черный) больше не находятся в 90 градусах. Так что в моей интерпретации преобразований есть некоторый фундаментальный недостаток.

Итак, как применить преобразование rotate, на которое не влияет предыдущая шкала ?

1 Ответ

3 голосов
/ 17 января 2012

Поставьте вращение перед шкалой, тогда оно будет работать так, как вы хотите. [У меня нет теории о том, почему это так, это «просто работает»]

transform: повернуть (45 градусов) scaleX (2) scaleY (1);

Обновление: несколько преобразований применяются путем умножения их базовых матриц преобразования вместе. Это означает, что преобразования применяются в обратном порядке. Поэтому, в каком бы порядке вы ни применяли ваши преобразования, перечислите их в обратном порядке, и они должны работать.

...