, потому что на страницу будут добавлены другие блоки. Теперь произведём вращение блока:

Стиль:

14 15 16 17

#rotate { transform: rotate(5deg); }

ВАЖНО: При трансформации элемент не освобождает пространство для нового положения, а перекрывает другие элементы, как при позиционировании.

Осью вращения является центр элемента. Свойство transform-origin позволяет указать другое положение.

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

По оси X бывают такие значения: left , center , right .

По оси Y бывают такие значения: top , center , bottom .

Также смещение точки можно указать в единицах изменения CSS и в процентах. Расстояние отсчитывается от левого верхнего угла элемента.

Укажем это свойство блоку:

HTML код:

Существуют значения свойства transform , которые по отдельности устанавливают горизонтальное и вертикальное перемещение.

transform: translateX(смещение)

transform: translateY(смещение)

Смещение указывается точно также.

Изменение размеров

CSS трансформация позволяет менять размеры элемента. Значение свойства:

transform: scale(X, Y)

X - число, на которое умножается ширина элемента.

Y - число, на которое умножается высота элемента.

Добавим на страницу блок и изменим его размеры:

Стиль:

HTML код:

Есть значения для отдельного изменения ширины и высоты.

transform: scaleX(цифра)

transform: scaleY(цифра)

Искажение

Можно осуществить искажение элемента. При этом стороны элемента сдвигаются вдоль осей координат. Значение свойства:

transform: skew(искажение по оси X, искажение по оси Y)

Искажение указывается в градусах. Можно указать только первое значение. Тогда искажения по оси Y не будет.

Стиль:

Есть значения свойства transform , которые отдельно искажают элемент по оси X и по оси Y.

transform: skewX(искажение)

transform: skewY(искажение)

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 можно просмотреть по ссылке ниже.

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

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

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

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат , так как веб-страница начинается с левого верхнего угла и идет вниз.

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

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

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

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

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

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

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

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

Во-первых, мы разместим наш объект (картинку грузовика) по центру.

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.

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

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

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

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

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

Теперь введем -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 идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

Так же как и грузовик, мы разместим ракету по центру:

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);

#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 может быть как положительным, так и отрицательным.

#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) .

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

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

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

#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 — высота.

Давайте посмотрим на следующий пример.

#axis:hover .larger{ transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -moz-transform: scale(2); }

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

#axis:hover .multiple { transform: translate(350px, -350px) rotate(360deg); -webkit-transform: translate(350px, -350px) rotate(360deg); -o-transform: translate(350px, -350px) rotate(360deg); -moz-transform: translate(350px, -350px) rotate(360deg); }

Заключение

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

Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.

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

Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE - на -ms.

1. Введение в CSS трансформации

CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);

В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:

Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.

2. Анимация

Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:

Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.

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

Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.

4. Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

4. Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами .

5. Использование различных видов анимации

В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.

При событии:hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.

Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.

Также обратите внимание, что изменение цвета происходит до поворота.

Фишка в том, что вы можете разбить -webkit-transition на несколько записей:

#block { ... background: blue; ... -webkit-transition-property: left, top, background, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay: 0, 0, 0, 1s; ... } #stage:hover #block { left: 100px; top: 100px; background: red; -webkit-transform: rotate(360deg); }

6. Событие одного элемента преобразует другой

Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~.

Вот и соответствующий пример:

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события.

#box2 { position: absolute; left: 120px; ... background: blue; ... } #box1:hover + #box2 { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); left: 627px; background: yellow; }

В то же время, мы можем анимировать и первый блок:

Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.

Спасибо Niall за предложенный урок!

Ранее мы видели, что CSS позволяет нам применять цвета, устанавливать шрифты, изменять настройки текста, позиционировать элементы, задавать для них пространство, украшать их и перемещать.

Преобразования в CSS представляют собой набор функций , которые позволяют определённым образом придавать элементу форму :

• translate : перемещает элемент вдоль трёх осей (х, у и z);
• rotate : вращает элемент вокруг центральной точки;
• scale : изменяет размер элемента;
• skew : искажает элемент.

Свойства трансформации

Есть три доступных свойства для трансформации:

• transform определяет, какая функция будет применяться (translate , rotate , scale и др.);
• transform-origin позволяет изменять точку начала преобразования (работает как background-position );
• transform-style для настройки 3D.

Обратите внимание, что в отличие от background и border , свойство transform не является сокращённым .

Здесь мы будем использовать только transform .

Не прерывает поток

Чтобы предотвратить неожиданное поведение, трансформируемые элементы не влияют на поток . Независимо от вращения, масштабирования или перемещения, они не будут влиять на другие элементы.

translate

Функция translate() позволяет перемещать элемент в плоскости (по осям х и у). Она принимает либо:

• один параметр: перемещает элемент вдоль оси х;
• два параметра: первое значение для оси х, второе для оси у.

Это похоже на использование относительного позиционирования с помощью значений left и top .

Давайте переделаем нашу замкнутую анимацию с помощью translate , вместо позиционирования left /top :

@keyframes translating { 0% { transform: translate(0, 0); } 25% { transform: translate(240px, 0); } 50% { transform: translate(240px, 140px); } 75% { transform: translate(0, 140px); } 100% { transform: translate(0, 0); } } p { animation: translating 4s linear infinite; }

Помните: transform - это стилевое свойство , translate() - это значение (и одновременно функция), применяемое к этому свойству.

Вы можете использовать translateX() и translateY() , чтобы переместить элемент вдоль только оси х и у, соответственно.

rotate

Функция rotate() позволяет вращать элемент вокруг неподвижной точки . По умолчанию, вращение происходит вокруг центра элемента. Думайте об этом как о грампластинке, которая играет на проигрывателе.

rotate() принимает только один параметр, который является значением угла и определяется в градусах (deg), градах (grad), радианах (rad) или в оборотах (turn) (один оборот эквивалентен полному кругу).

@keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } p { animation: rotating 4s linear infinite; }

scale

Функция scale() позволяет изменять размер элемента. Она может увеличить или уменьшить элемент. Функция принимает либо:

• один параметр: изменение размеров элемента одинаково по высоте и ширине;
• два параметра: первое значение изменяет размер элемента по горизонтали, второе по вертикали.

Диапазон возможных значений:

• 1: элемент сохраняет свой первоначальный размер;
• 2: элемент удваивается в размере;
• 0.5: элемент уменьшается наполовину;
• 0: элемент в основном исчезает (так как его высота и ширина равны нулю);
• -1: элемент отражается.

@keyframes scaling { 0% { transform: scale(1); } 20% { transform: scale(2); } 40% { transform: scale(0.5); } 60% { transform: scale(0); } 80% { transform: scale(-1); } 100% { transform: scale(1); } } p { animation: scaling 10s steps(1) 0s infinite; }

Как и для translate() , у функция scale() есть версии для х и у: scaleX() и scaleY() , для изменения размера по горизонтали и вертикали, соответственно.

skew

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

Эта функция преобразования используется редко, поскольку её последствия весьма непредсказуемы, а результат не обязательно привлекателен. Тем не менее, давайте посмотрим, как это работает.

Как и scale() , функция skew() принимает либо:

• один параметр: элемент искажается по горизонтали;
• два параметра: первое значение искажает элемент по горизонтали, второе по вертикали.

Как и rotate() , функция skew() принимает только значения угла, такого как градусы (deg).

@keyframes skewing { 0% { transform: skew(0deg); } 20% { transform: skew(10deg); } 40% { transform: skew(45deg); } 60% { transform: skew(90deg); } 80% { transform: skew(120deg); } 100% { transform: skew(0deg); } } p { animation: skewing 10s steps(1) 0s infinite; }

3D-функции

Мы видели, как функции трансформации работают на плоскости , вдоль осей х и у.

Например:

• У translate() до двух параметров:
  • translate(x)
  • translate(x, y)
• translateX() только для оси х
• translateY() только для оси у

Но для всех этих функций также есть 3D-версии .

Например, для translate() есть версия translate3d() , которая выполняет преобразование в трёх измерениях , а это значит, что она также включает в себя ось z (кроме того существует отдельная функция translateZ ).