CSS3 2D трансформации

Модуль Transformation является огромным дополнением в CSS3, он выводит способ, которым мы манипулируем элементами на веб-сайте, на следующий уровень.

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

Вместо этого на этот раз мы сделаем шаг назад и рассмотрим основы 2D-трансформации CSS3, чтобы увидеть, как это работает на фундаментальном уровне.
Синтаксис
CSS3 трансформации Модуль в основном позволяет нам преобразовывать элемент в определенной степени, такой как перемещение, масштабирование, поворот и наклон.

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

преобразование: метод (значение); / * Официальный синтаксис W3C * /
-опреобразование: метод (значение); / * Opera 10.5+ * /
-ms-transform: метод (значение); / * Internet Explorer 9.0+ * /
-moz-transform: метод (значение); / * Firefox 3.6+ * /
-webkit-transform: метод (значение); / * Chrome / Safari 3.2+ * /

Кроме того, метод, на который мы ссылаемся выше, это transform-функции, которые можно заменить одним из следующих: translate (), scale (), rotate () или skew ().
Значение
Большая часть значения метода будет соответствовать оси X и оси Y. Если вы помните Декартова система координат из вашего урока математики в средней школе базовый принцип очень похож, ось X представляет горизонтальную линию, а ось Y представляет вертикальную линию.
За исключением поворотов. Вращение будет использовать полярные координаты, выраженные в градусах от 0 до 360.
Значения для всех методов могут быть как отрицательными, так и положительными. Просто сделайте заметку, поскольку веб-страница читается последовательно сверху вниз, что делает ось Y в сети противоположной первоначальному принципу декартовых координат. Это означает, что когда вы добавляете отрицательное значение к оси Y, оно будет перемещаться вверх.
Используя Преобразования
Теперь давайте посмотрим на следующую базовую демонстрацию, чтобы увидеть трансформацию в действии.
Я перевожу
Не зацикливайтесь на термине переводить, он не переводит иностранный язык. Перевод здесь – фактически метод для перемещения элементов в некотором направлении.

Метод содержит два значения; X и Y. Значение X, как мы указали выше, будет брать элемент горизонтально; влево или вправо, а значение Y переводит его вертикально вниз или вверх.
Теперь давайте посмотрим несколько простых демонстраций ниже:

div {
ширина: 100 пикселей;
высота: 100 пикселей;
transform: translate (100px, 250px);
}

Фрагмент выше переместит элемент на 100 пикселей вправо и 250 пикселей вниз.

div {
ширина: 100 пикселей;
высота: 100 пикселей;
transform: translate (100px, 0);
}

Приведенный выше фрагмент переместит элемент вправо на 100 пикселей, потому что мы обнуляем ось Y. Затем, если мы хотим переместить элемент влево, нам нужно только установить отрицательную ось X следующим образом:

div {
ширина: 100 пикселей;
высота: 100 пикселей;
transform: translate (-100px, 0);
}

Кроме того, мы можем перемещать элемент в одном направлении с помощью этих отдельных методов; translateX () и translateY (), разница в том, что каждый из этих методов принимает только одно значение.

Таким образом, практически говоря, transform: translate (-100px, 0) также равен transform: translateX (-100px).
II – Шкала
Метод масштабирования позволяет нам увеличивать или уменьшать элементы от его фактического размера. Значение шкалы такое же, как у метода перевода выше, оно также содержит X и Y. Единственная разница в том, что мы не указываем единицу измерения. Вот пример:

div {
ширина: 100 пикселей;
высота: 100 пикселей;
преобразование: масштаб (1,5);
}

Приведенный выше пример увеличит div на 1,5 или 150% от его фактического размера, и, поскольку мы масштабируем его одинаково для обоих направлений X и Y, нам нужно объявить его только в одном значении. Вы также можете объявить это следующим образом: transform: scale (1.5,1.5); если вы хотите пойти более подробно, он будет делать то же самое.
Кроме того, если мы хотим уменьшить элемент, мы бы специально использовали значение от 0,999 до абсолютного 0, как в примере ниже, что уменьшит размер div на 50% или на половину:

div {
ширина: 100 пикселей;
высота: 100 пикселей;
преобразование: масштаб (0,5);
}

Но будьте осторожны, если вы установите абсолютное значение «0», div просто исчезнет, ​​поэтому, если у вас нет веской причины для этого, я бы не рекомендовал делать это.
III – Повернуть
Как мы упоминали ранее в этом посте, метод rotate использует полярные координаты, поэтому значение указывается в градусах. Вот два примера

Фрагмент ниже повернет div на 30 градусов по часовой стрелке.

div {
ширина: 100 пикселей;
высота: 100 пикселей;
преобразование: вращение (30 градусов);
}

Отрицательное значение, как показано в примере ниже, будет вращать div в противоположном направлении (против часовой стрелки) в той же степени.

div {
ширина: 100 пикселей;
высота: 100 пикселей;
преобразование: вращение (-30 градусов);
}

IV – перекос
Скос метод позволяет нам создать своего рода параллелограмм. Он также содержит два значения оси X и Y. Однако само значение указывается в градусах, а не в линейных измерениях, которые мы используем для шкалы или метода перевода. Вот пример:

div {
ширина: 200 пикселей;
высота: 100 пикселей;
преобразование: перекос (30 градусов, 10 градусов);
}

V – множественный метод
Свойство transform не ограничивается обработкой только одного метода, фактически мы можем включить несколько методов в одно объявление, например так:

div {
ширина: 100 пикселей;
высота: 100 пикселей;
transform: translateX (100px) rotate (45 градусов);
}

Вышеуказанный фрагмент переместит элемент на 100px вправо и в то же время повернет на 45 градусов.

Демо “Multiple Method”,
Трансформировать Происхождение
Transfrom-origin, как следует из его названия, используется для контроля начальной точки преобразования. Если мы явно не объявим это свойство со следующим синтаксисом transform-origin: X Y;, тогда браузер примет значение по умолчанию, которое составляет 50% для X и 50% для Y.
Теперь, если мы укажем источник преобразования в 0 (X) 0 (Y), преобразование начнется в верхнем левом углу.

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

-webkit-transform-origin: X Y;
-moz-transform-origin: X Y;
-o-transform-origin: X Y;
-ms-transform-origin: X Y;
источник преобразования: X Y;

Вывод
Мы прошли через все четыре основных метода преобразования; переводить, масштабировать, вращать и наклонять

Однако, как уже упоминалось, этот модуль все еще находится на ранней стадии, поэтому, если вы будете применять эти методы на своем следующем веб-сайте, убедитесь, что он изящно ухудшается для несовместимые браузеры (Я не имею в виду IE6 здесь).

Наконец, вы можете просмотреть все демо или скачать исходный код по следующим ссылкам.