Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform .
CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.
К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block; , а также элементы, значение свойства display которых вычисляется как table-row , table-row-group , table-header-group , table-footer-group , table-cell или table-caption . Трансформированным считается элемент с любым установленным значением свойства transform , отличным от none .
Существуют два вида CSS3-трансформаций – 2D и 3D . 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin . Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.
2D-трансформации элементов
Поддержка браузерами
IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-
1. Функции 2D-трансформации transform
Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации , которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.
Допустимые значения:
matrix() — любое число
translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %
scale() , scaleX() , scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew() , skewX() , skewY() — угол (deg, grad, rad)
| Функция | Описание |
|---|---|
| none | Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов. |
| matrix(a, c, b, d, x, y) | Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх. |
| translate(x,y) | Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения. |
| translateX(n) | Сдвигает элемент относительно его обычного положения по оси X. |
| translateY(n) | Сдвигает элемент относительно его обычного положения по оси Y. |
| scale(x,y) | Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально. |
| scaleX(n) | Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали. |
| scaleY(n) | Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали. |
| rotate(угол) | Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота. |
| skew(x-угол,y-угол) | Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически. |
| skewX(угол) | Деформирует стороны элемента относительно оси X. |
| skewY(угол) | Деформирует стороны элемента относительно оси Y. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.
2. Точка трансформации transform-origin
Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center , или 50% 50% . Задаётся только для трансформированных элементов. Не наследуется.
Иногда необычные дизайнерские решения вынуждают верстальщика прибегать к таким же нестандартным решениям при расположении текста. К примеру, повернуть один из текстовых элементов на определенный угол. В данной статье будут рассмотрены несколько простых решений этой задачи.
Замена текста картинкой
Наиболее примитивным решением поставленной задачи станет использование картинки. Средствами небезызвестной всем программы Adobe Photoshop текст без труда поворачивается на любой угол. Как вы понимаете, не нужно много ума, чтобы воспользоваться данным методом.
В некоторых ситуациях другим способом воспользоваться невозможно, однако в большинстве случаях отходят от использования картинки. Это объясняется рядом недостатков, которые сопутствуют указанной методике:
- Невозможность пользователю копировать информацию, в указанном контейнере;
- Сложность процедуры внесения исправлений в текстовую часть элемента;
- Увеличивается трафик на сервере сайта;
- Рост обращений к серверу при обновлении ресурса.
Несмотря на то, что нашлось такое количество негативных сторон применения картинки, у метода есть пару положительных эффектов.
- Кроссбраузерность – отсутствие проблем при отображении в разных браузерах.
- Высокая способность в позиционировании изображения.
Все-таки в данном случае отрицательные стороны перевешивают. Советую Вам обратиться к другим решениям.
Использование свойства CSS transform
Применение этого способа гораздо выше стоит в сравнении с изображением. Существенную разницу формирует гибкость в редактировании текста и возможность выделять и копировать содержимое повернутого контейнера. Главным камнем преткновения для развития этой методики была кроссбраузерность. Сейчас достигли неплохих результатов на этом фронте, что позволяет без проблем применять свойство transform .
Суть работы свойства заключается в разбитии плоскости по градусам. В следствие этого при указании определенного угла контейнер займет соответствующее положение. Стоит отметить, что свойство в чистом виде не применяется. Ему должны сопутствовать вендорные свойства, которые, собственно, и обеспечивают высокий показатель кроссбраузерности.
Важно отметить, что меняет положение не текст внутри блока, а именно сам блок, к которому обращено свойство через селектор класа или каким-либо другим способом. Ниже представлен пример использования метода
Conteiner { - moz- transform: rotate(- 45deg) ; - webkit- transform: rotate(- 45deg) ; - o- transform: rotate(- 45deg) ; - ms- transform: rotate(- 45deg) ; transform: rotate(- 45deg) ; }
По итогу получим примерно такую картину:
Обращаюсь к такому свойству, оформление без проблем будет выводится в Firefox, Opera, Internet Explower и других вебкит-браузерах.
Обращение через Javascript
Суть процесса полностью аналогична рассмотренному перед этим методом. Для его реализации необходим минимум знаний js-кода, математики и разбираться в фильтре Matrix.
Javascript
var deg2radians = Math. PI * 2 / 360 , deg = - 4 ; rad = deg * deg2radians, costheta = Math. cos (rad) , sintheta = Math. sin (rad) ; jQuery(".rotatedBlock" ) . css({ filter: "progid:DXImageTransform.Microsoft.Matrix (M11=" + costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="auto expand", enabled=true)" } ) ;
По итогу получим в браузере ту же картину, что и при использовании свойства transform .
Даже если Вы ни символа не понимаете в этой записи – не беда. Для работы с этим кодом достаточно понимать, что во второй строчке прописывается значение угла, его вы подставляете под себя, остальное – просто копируете без изменений.
Особенности использования Javascript и CSS
Эти два метода имеют несколько незначительных отличий в принципе работы, знать и учитывать которые очень важно.
Первое отличие основывается на разности высоты блока и его положения. Выход из ситуации достаточно простой и заключается в использовании свойства margin . Отступами мы выставляем блок на нужный уровень и позицию. Прочие разногласия в позиционировании можно устранить присвоением блоку значение абсолютного позиционирования, что тоже эффектно действует.
Более сложный и индивидуальный подход основывается на применении свойства transform-origin . Суть этой методики будет описана в последующих статьях.
Следующее отличие кроется в сущности самого поворота. При использовании js-кода точка поворота находится на краю блока. Во втором способе эта точка расположена в центре элемента. Для упрощения понимания смотрим на картинку ниже
Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать угол поворота. Кроме того, существует возможность задать произвольный центр вращения.
Трансформация блока
В CSS rotate() является функцией трансформации, поэтому она должна быть передана свойству transform элемента.
Element { transform: rotate(45deg); }
В качестве первого и единственного аргумента передается угол, на который будет повернут объект. Вращение осуществляется в двумерном пространстве. Для трехмерных трансформаций существуют функции в CSS rotateX(), rotateY(), rotateZ() и rotate3d().
Изначально занятое элементом место на странице остается за ним зарезервировано. Визуальное перемещение происходит в новом слое, не сдвигая соседние блоки.
Угол поворота
Аргумент угла, передаваемый методу, должен принадлежать к CSS-типу
Положительный угол определяет вращение объекта по направлению движения часовой стрелки, отрицательный - в обратном направлении.
Центр вращения
По умолчанию вращение блока осуществляется вокруг его геометрического центра. Для изменения этой точки необходимо воспользоваться свойством transform-origin.
По стандарту оно принимает три параметра, которые определяют координаты по осям X, Y и Z. Но так как rotate() в CSS является двумерной трансформацией, достаточно будет передать только два значения.
Element { transform: rotate(45deg); transform-origin: 20px 100%; }
Координата по каждой оси может быть определена в любых валидных единицах длины, процентах от размера блока или с помощью ключевых слов top, bottom, left, right. Начало координат располагается в верхнем левом углу прямоугольного контейнера.
Анимация вращения
Свойство transform хорошо поддается динамическому изменению, следовательно, CSS позволяет создать анимацию вращения элемента в двумерном пространстве.
Если требуется вращать объект в ответ на определенное пользовательское действие, например наведение курсора, можно воспользоваться CSS-свойством transition, определяющим замедленное изменение значения других свойств.
Element { transition: transform 2s; } element:hover { transform: rotate(180deg); }
К исходному элементу не применяются никакие трансформации, но при наведении на него курсора блок будет плавно поворачиваться на 180 градусов в течение двух секунд. Когда пользователь уберет курсор, произойдет такой же плавный поворот в исходное положение.
Более сложным способом анимации объекта является определение для него последовательности смены кадров с помощью свойств и правила @keyframes.
Element { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
К указанному элементу применяется анимация rotate, определяющая полный поворот от 0 до 360 градусов в течение двух секунд. Свойство animation-iteration-count устанавливает повторение анимации до бесконечности, а animation-timing-function - плавный эффект перехода. Сочетание свойства в с rotate-трансформаций позволяет создавать красивые динамические эффекты.
Свойство CSS transform (от слова "трансформация") позволяет видоизменять элемент на html-страницах. Например, можно
- вращать
- смещать
- изменять масштаб
- наклонять
- комбинировать выше описанные действия
Благодаря этому свойству можно создавать интересные эффекты без применения JavaScript, что позволяет ускорять работу браузера. Важно так же отметить, что есть возможность кобминировать эффект с временными задержками.
1. Синтаксис CSS transform
transform : трансформация1 [трансформация2 ];
Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).
Примечание про браузерыНе все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :
- -ms-transform - для IE9 и старше (младше девятой версии трансформация не поддерживается
- -webkit-transform - для Chrome, Safari, Android и iOS
- -o-transform - для Opera до версии 12.10
- -moz-transform - для Firefox до версии 16.0
2. transform:rotate(x) - вращение объекта
Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg
Пример #1. Вращение объекта в html через трансформацию
Примечание
Свойства:
-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );
Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.
Пример #2. Вращение объекта в html при наведении курсора
Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).
На странице преобразуется в следующее
Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.
Пример #3. Плавное вращение при наведении курсора (анимация) в html
Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition . Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear
На странице преобразуется в следующее
Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.
3. transform:translate(x,y) - смещение объекта
Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках - смещение по оси Х и У соответственно.
Пример #4. Смещение объектов в html через трансформацию
На странице преобразуется в следующее
Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).
ПримечаниеЕсли нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.
4. transform:scale(x,y) - масштабирование объекта
Команда для масштабирования объекта scale(x,y) , где аргументы в скобках - масштабирование по осям Х и У соответственно.
Пример #5. Масштабирование объектов в html
На странице преобразуется в следующее
При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.
ПримечаниеЕсли нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.
5. transform:skew - наклон объекта
Команда для наклона объекта skew(x,y) , где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .
Пример #6. Наклон объектов в html
На странице преобразуется в следующее
При наведении квадрат трансформируется в ромб благодаря наклону.
ПримечаниеЕсли нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.
6. Комбинирование значений transform
Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale ), вращение (rotate ) и перемещения (translate ).
Пример #7. Комбинирование значений transform
Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.
На странице преобразуется в следующее
7. Другие значения transform
Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.
- none - отсутствие преобразований (по умолчанию включено оно);
- matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
- matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
- translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
- scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
- rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
- rotateX(x) - 3d вращение по оси X;
- rotateY(x) - 3d вращение по оси Y;
- rotateZ(x) - 3d вращение по оси Z;
- perspective(n) - перспектива для преобразования 3D элемента;
В JavaScript свойство CSS transform доступно по следующим свойствам:
object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""
Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.
Перевод: Влад Мержевич
Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform . Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:
#myelement { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
Хорошая штука. Однако вращается элемент целиком - его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?
В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.
К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after , а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.
Трансформация только фона
У контейнера может не быть никаких стилей, но необходимо задать position: relative , поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden , в противном случае фон будет выходить за пределы контейнера.
#myelement { position: relative; overflow: hidden; }
Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.
#myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
Обратите внимание, что вам, возможно, потребуется настроить ширину псевдоэлемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.
Фиксация фона у трансформируемых элементов
Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:
#myelement { position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } #myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }
Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.
Пожалуйста, для примера. Полный код хранится внутри HTML.
Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.
IE6 и 7 не поддерживает псевдоэлементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.