Повернуть div на 45 градусов. Перемещения и трансформации в CSS3
Функция 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 .
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% . Задаётся только для трансформированных элементов. Не наследуется.
- Перевод
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в 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: Используя этот класс, мы будем двигать наш объект.
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.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 - высота.Давайте посмотрим на следующий пример.
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. В этой статье мы обратимся к основам основ 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: Используя этот класс, мы будем двигать наш объект.
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.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 - высота.Давайте посмотрим на следующий пример.