Вы здесь: Главная > CSS > Преобразования

Преобразования

Опубликовано автором Просмотры: 4

Ужасный мегабюджетный фильм Майкла Бэя о CSS?! Нет, мощное манипулирование формой, размером и положением окна и его содержимого с помощью свойства transform.

По умолчанию CSS-блоки, эти визуальные представления HTML-элементов, имеют квадратную форму. По крайней мере, прямоугольную; ровную, с четырьмя прямыми сторонами и четырьмя скучными прямыми углами. Но с помощью transform вы можете растягивать и придавать этим коробкам всевозможные формы.

На этой странице будут указаны только свойства transform и transform-origin, но на практике вы, вероятно, захотите продублировать их с помощью -webkit-transform и -webkit-transform-origin для достижения тех же результатов в Safari и Chrome, а также -ms-transform и -ms-transform-origin для Internet Explorer 9, самой ранней версии IE, которая будет поддерживать преобразования.

Манипулируя рамкой в двух измерениях, можно использовать transform для поворота, перекоса, масштабирования и перевода рамки и её содержимого.

Четыре основные функции 2D-преобразования — поворот, перекос, масштабирование и перевод.

Вращение

Результатом следующего будет квадратная оранжевая коробка со всем её содержимым — текстом, изображениями, чем угодно — послушно стоящая по стойке смирно:

.note {
    width: 300px;
    height: 300px;
    background: hsl(36,100%,50%);
}

Но вы можете развернуть этих солдат, добавив дополнительное объявление:

transform: rotate(-10deg);

Это повернёт коробку и, что важно, всё, что в ней находится, на десять градусов против часовой стрелки.

Перекосы

Смещение позволяет изменять горизонталь и вертикаль таким образом, чтобы…

transform: skew(20deg,10deg);

… отклонится от оси x на 20 градусов по оси y на 10 градусов.

Вы также можете указать один угол, например skew(20deg), который является эквивалентом skew(20deg,0).

Масштабирование

Очевидно, что вы можете изменить свойства поля width и height, но это не повлияет на размер чего-либо внутри него. Масштабирование, однако, увеличит не только ширину и высоту, но и размер всего, что содержится в поле:

transform: scale(2);

Это умножит размер на два. Вы можете использовать любое положительное число, включая значение меньше “1”, например ”0,5″, если хотите использовать уменьшающий луч.

Вы также можете масштабировать горизонтальные и вертикальные размеры отдельно:

transform: scale(1,2);

При этом горизонталь останется как есть (поскольку это масштаб, равный 1), а вертикаль умножится на два.

Перевод

Вы можете сдвигать поле по горизонтали и вертикали с помощью transform: translate:

transform: translate(100px,200px);

Аналогично position: relative; left: 100px; top: 200px;, это переместит поле на 100 пикселей вправо и на 200 пикселей вниз.

Помимо упомянутых значений, если вы хотите настроить таргетинг на отдельную ось, вы также можете использовать skewX, skewY, scaleX, scaleY translateX, translateY.

Комбинирование преобразований

Хотите поворачивать и масштабировать одновременно? Вы сумасшедший ребёнок. Вы можете сделать это, просто разделяя значения пробелами, например:

transform: rotate(-10deg) scale(2);

Важен порядок значений ─ последнее будет выполнено раньше первого. В предыдущем примере поле будет масштабировано, а затем повёрнуто. Следовательно, он отличается от transform: scale(2) rotate(-10deg);, который будет поворачиваться, а затем масштабироваться.

В качестве альтернативы вы могли бы использовать функцию matrix. matrix выполняет всё ─ поворот, перекос, масштабирование и перевод. Она принимает шесть значений:

transform: matrix(2,-0.35,0.35,2,0,0);

Эти значения не совсем понятны и включают математику (или только одну математику, если вы придерживаетесь американских убеждений), с которой, если вы действительно хотите разобраться (преимущества заключаются не только в краткости, но и в точности), возможно, стоит обратить внимание на спецификации.

Происхождение

Не хватает одного важного аспекта. Если вы преобразуете поле, то задействован ещё один параметр: происхождение преобразования. Например, если вы вращаете, она по умолчанию будет вращаться в точке, которая является центром поля; если бы у вас была карточка, воткните булавку прямо в её середину, а затем приклейте её ко лбу (не делайте этого), карточка вращалась бы от середины. Однако вы можете изменить место на карте, к которому прикреплён PIN-код transform-origin:

transform-origin: 0 0;

В этом примере блоку будет предложено преобразовать (повернуть, как в предыдущем примере) слева вверху, при этом первый “0” будет горизонтальным, второй ─ вертикальным. Эти значения, конечно, могут отличаться — как и все другие значения x-y, и вы можете использовать обычные значения center, top right bottom, left длины и процента, включая отрицательные.

Одно и то же поле, повёрнутое по часовой стрелке, с разными источниками преобразования.
И всё это только в двух ничтожных измерениях. transform это левиафан с ещё большей силой, который также может быть использован для трёхмерной магии. На самом базовом уровне вы можете использовать rotateX и rotateY, которые будут вращаться “в сторону” или “от” вас по осям x и y, и есть такие, как translate3d, scale3d и устрашающие matrix3d, все из которых имеют ещё большие трудности для браузера, чем их 2D-аналоги.

Страницы в тему:

Примеры CSS^

Добавить комментарий