Взгляд в CSS3 2D трансформации
Модуль трансформации является огромным дополнением в CSS3, оно выводит способ, которым мы манипулируем элементами на веб-сайте, на следующий уровень.
Есть некоторые эксперименты, которые действительно поражают меня, например, этот. Однако мы не собираемся создавать что-то вроде иконки только для CSS, которая может каким-то образом превратиться в автобота, поскольку это может быть ошеломляющим и не совсем пригодным для использования в реальной жизни..
Вместо этого на этот раз мы сделаем шаг назад и рассмотрим основы CSS3 2D-преобразований, чтобы увидеть, как это работает на фундаментальном уровне..
Синтаксис
Модуль CSS3 Transformations в основном позволяет нам до некоторой степени преобразовывать элементы, такие как перевод, масштабирование, вращение и наклон.
Официальный синтаксис преобразования: метод (значение). Однако, как и любые другие замечательные дополнения CSS3, которые все еще находятся на ранних стадиях, текущим браузерам по-прежнему нужна синтаксическая версия для запуска преобразований. Итак, полный синтаксис получился бы так:
преобразование: метод (значение); / * Официальный синтаксис W3C * / -o-transform: метод (значение); / * Opera 10.5+ * / -ms-transform: метод (значение); / * Internet Explorer 9.0+ * / -moz-transform: метод (значение); / * Firefox 3.6+ * / -webkit-transform: метод (значение); / * Chrome / Safari 3.2+ * /
Кроме того, метод, о котором мы говорим выше, это спектрально-функции, который можно заменить одним из следующих: переведите(), масштаб(), вращаться () или же перекос ().
Значение
Большая часть значения метода будет соответствовать Ось абсцисс а также Ось ординат. Если вы помните декартову систему координат из вашего урока математики в средней школе, базовый принцип очень похож, ось X представляет горизонтальный линия и ось Y представляет вертикальный линия.
За исключением поворотов. вращение будет использовать полярные координаты который выражается в градусах в диапазоне от 0 до 360.
Значения для всех методов могут быть как отрицательными, так и положительными. Просто сделайте заметку, поскольку веб-страница читается последовательно сверху вниз, что делает ось Y в сети противоположной первоначальному принципу декартовых координат. Это означает, что когда вы добавляете отрицательное значение к Ось ординат, вместо этого он переместится наверх.
Используя Преобразования
Теперь давайте посмотрим следующую базовую демонстрацию, чтобы увидеть Преобразование в действии.
Я перевожу
Не быть омраченным с термином переведите, это не будет переводить иностранный язык. переведите вот собственно метод для перемещения элементов в каком-то направлении.
Метод содержит два значения; Икс а также Y. Значение X как мы указывали выше, элемент будет расположен горизонтально; влево или вправо, в то время как Y значение будет принимать его вертикально к снизу или вверх.
Теперь давайте посмотрим несколько простых демонстраций ниже:
div width: 100px; высота: 100 пикселей; transform: translate (100px, 250px);
Приведенный выше фрагмент переместит элемент на 100 пикселей вправо и 250 пикселей вниз.
div width: 100px; высота: 100 пикселей; transform: translate (100px, 0);
Приведенный выше фрагмент переместит элемент вправо на 100 пикселей, потому что мы обнуляем ось Y. Затем, если мы хотим переместить элемент влево, нам нужно только установить отрицательную ось X следующим образом:
div width: 100px; высота: 100 пикселей; transform: translate (-100px, 0);
- "Перевести" демо
Кроме того, мы можем перемещать элемент в одном направлении с помощью этих отдельных методов; translateX () а также translateY (), разница в том, что каждый из этих методов принимает только одно значение.
Таким образом, практически transform: translate (-100px, 0) также равно transform: translateX (-100px).
II - Шкала
масштаб метод позволяет нам увеличить или уменьшить элементы от его фактического размера. Значение шкалы такое же, как переведите Метод выше, он также содержит X и Y. Единственное отличие состоит в том, что мы не указываем единицу. Вот пример:
div width: 100px; высота: 100 пикселей; преобразование: масштаб (1,5);
Приведенный выше пример увеличит ДИВ 1,5 или 150% его фактического размера, и поскольку мы масштабируем его одинаково для обоих направлений X и Y, нам нужно только объявить его в одном значении. Вы также можете заявить об этом таким образом преобразование: масштаб (1,5,1,5); если вы хотите пойти более подробно, он будет делать то же самое.
Кроме того, если мы хотим уменьшить элемент, мы бы специально использовали значение от 0,999 до абсолютного 0, как в примере ниже, что уменьшит размер div на 50% или на половину:
div width: 100px; высота: 100 пикселей; преобразование: масштаб (0,5);
Но будьте осторожны, если вы установите абсолютное значение “0” ДИВ просто исчезнет, поэтому, если у вас нет веской причины для этого, я бы не рекомендовал делать это.
- "Масштаб" демо
III - Повернуть
Как мы упоминали ранее в этом посте, вращаться Метод использует полярные координаты, поэтому значение указывается в градусах. Вот два примера
Фрагмент ниже будет вращать ДИВ 30 градусов по часовой стрелке.
div width: 100px; высота: 100 пикселей; преобразование: вращение (30 градусов);
Отрицательное значение, как показано в примере ниже, будет вращать ДИВ в противоположном направлении (против часовой стрелки) в той же степени.
div width: 100px; высота: 100 пикселей; преобразовать: повернуть (-30 градусов);
- "Повернуть" демо
IV - перекос
скос Метод позволяет нам создать своего рода параллелограмм. Он также содержит два значения оси X и Y. Однако само значение указывается в градусах вместо линейных измерений, которые мы используем для масштаб или переведите метод. Вот пример:
div ширина: 200 пикселей; высота: 100 пикселей; преобразование: перекос (30 градусов, 10 градусов);
- "Скос" демо
V - множественный метод
преобразование свойство не ограничено обработкой только одного метода, фактически мы можем включить несколько методов в одно объявление, например так:
div width: 100px; высота: 100 пикселей; transform: translateX (100px) rotate (45 градусов);
Вышеуказанный фрагмент переместит элемент на 100px вправо и в то же время повернет на 45 градусов..
"Multiple Method" демо.
Трансформировать Происхождение
transfrom-происхождения - как следует из его названия - используется для контроля начальной точки преобразования. Если мы не объявим явно это свойство со следующим синтаксисом источник преобразования: 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 здесь).
Наконец, вы можете просмотреть все демо или скачать исходный код по следующим ссылкам.
- демонстрация
- Скачать исходный код
