Css повернуть блок на 90 градусов. Как применить трансформацию CSS3 к фоновым картинкам

Перевод

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат , так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем - горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

object: Установление главных правил нашего объекта.
van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.object { position: absolute; } .van { top: 45%; left: 44%; }
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0); . Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

#axis:hover .move-right{ transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ }
Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.

Object { position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ }
Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

linear : перемещение происходит постоянной скоростью от начала и до конца.
ease : перемещение начинается медленно и затем набирает скорость.
ease-in : перемещение начинается медленно.
ease-out : перемещение заканчивается медленно.
ease-in-out : перемещение начинается и заканчивается медленно.
cubic-bezier : ручное определение значения перемещения.

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ , в то время как Y остается неизменным. В нашем случае мы переместим объект на -350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); - переместим объект влево.
#axis:hover .move-left { transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ }
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket { top: 43%; left: 44%; }
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

#axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS
#axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y . Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS
#axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg) ; где n - градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }

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

Масштабирование - это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y) , мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X - ширина, а Y - высота.
Давайте посмотрим на следующий пример.

Перевод: Влад Мержевич

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства 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 с помощью современных селекторов или через условные комментарии.

Перевод

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

1: Горизонтальное перемещение

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

object: Установление главных правил нашего объекта.
van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
move-right: Используя этот класс, мы будем двигать наш объект.

linear : перемещение происходит постоянной скоростью от начала и до конца.
ease : перемещение начинается медленно и затем набирает скорость.
ease-in : перемещение начинается медленно.
ease-out : перемещение заканчивается медленно.
ease-in-out : перемещение начинается и заканчивается медленно.
cubic-bezier : ручное определение значения перемещения.

Двигаемся влево

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

2: Вертикальное перемещение

Двигаемся вверх

#axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }

Двигаемся вниз

HTML

CSS
#axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }

3: Диагональное перемещение

HTML

CSS
#axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }

4: Вращение

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }

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

Модель визуального форматирования 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% . Задаётся только для трансформированных элементов. Не наследуется.

2.
2.

Поворот элемента средствами CSS 3

Периодически web-дизайнеры сталкиваются с проблемой поворота какого-либо элемента. Благодаря средствам CSS 3 у этой задачи появилось довольно простое решение. Опять же, для кроссбраузерности нужно указать несколько свойств. Ниже приведён пример кода для поворота элемента на 90 градусов .

Код CSS

#rotate_element {
-webkit-transform: rotate(90deg); // разворот элемента для разных бразуеров

transform: rotate(90deg);
}

Выравнивание и направление текста средствами CSS 3

Теперь подробнее о свойстве writing-mode . Оно позволяет задать выравнивание (слева - справа) текста элемента и, что самое интересное, направление (горизонтальное или вертикальное)! Смотрим и пробуем:

lr-tb текст направлен слева направо.
rl-tb текст направлен справа налево.
tb-rl текст направлен вертикально и выравнивается по верхнему и правому краю.
bt-rl текст направлен вертикально и выравнивается по нижнему и правому краю.
tb-lr текст направлен вертикально и выравнивается по верхнему и левому краю.
bt-lr текст направлен вертикально и выравнивается по нижнему и левому краю.
На примере фразы текст идёт сюда можно рассмотреть действие CSS-свойств

Код CSS

Text {
writing-mode: lr-tb; /* текст направлен слева направо */
}

Text1 {
writing-mode: rb-tb; /* текст направлен справа налево */
}

Пример поворота текста на 90 градусов и выравнивания текста CSS 3

Вот готовый пример. Текст поворачиваем на 90 градусов. Для этого достаточно создать блок с идентификатором rotateText и задать ему свойства CSS.

Код HTML и CSS

Вертикально направленный текст

Пример поворота элемента на 90 градусов на CSS можно просмотреть по ссылке ниже.