Комбинация трансформаций

Послание № 18

Трансформация

Свойство transform поставляется в двух разных наборах — двумерных и трёхмерных. В каждом из них есть свои индивидуальные свойства и значения. Но сегодня мы с вами разберем только двухмерную трансформацию.

Фактический синтаксис для свойства transform достаточно прост и включает свойство transform, за которым идёт значение. Значение определяет тип трансформации, внутри скобок которого следует определённая величина.

Синтаксис transform:

div {

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

}

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

По умолчанию точкой трансформации является центр элемента, 50% 50%, по горизонтали и вертикали, но об этом немного позже.

Двумерная трансформация

Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси.

D rotate

Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки.

HTML

CSS

.box-1 {

transform: rotate(20deg);

}

Серый квадрат за элементом это исходное положение элемента.

D scale

Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента.

Значение масштаба по умолчанию равно 1, поэтому любое значение от.99 до.01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.

HTML

CSS

.box-1 {

transform: scale(.75);

}

.box-2 {

transform: scale(1.25);

}

Можно отдельно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY.

Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale, задав сперва значение по оси x, затем через запятую значение по оси y.

D translate

Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение по вертикальной оси.

Чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва указываем значение по оси х, затем через запятую значение по оси y.

Значения, используемые внутри translate, могут быть любыми основными единицами длины, наиболее часто применяются пиксели или проценты.

Положительные значения толкают элемент вниз и вправо от позиции по умолчанию, а отрицательные значения тянут элемент вверх и влево.

HTML

CSS

.box-1 {transform: translateX(-10px);}

.box-2 { transform: translateY(25%);}

.box-3 { transform: translate(-10px, 25%);}

D skew

Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу.

Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew, сперва задаётся значение по оси х, затем через запятую значение по оси у.

Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.

HTML

CSS

.box-1 {transform: skewX(5deg);}

.box-2 { transform: skewY(-20deg);}

.box-3 {transform: skew(5deg, -20deg);}

Комбинация трансформаций

Типично использовать несколько преобразований за раз, к примеру, поворот и масштабирование размера элемента одновременно. В этом случае несколько преобразований могут быть скомбинированы вместе. Для их объединения значения идут списком в свойстве transform один за другим без использования запятых.

Применение нескольких деклараций transform не будет работать, так как каждая декларация перезапишет всё над ним. Поведение в этом случае такое же, как если бы вы установили height для элемента несколько раз.

HTML

CSS

.box-1 {transform: rotate(25deg) scale(.75);}

.box-2 {transform: skew(10deg, 20deg) translateX(20px);}

Точка трансформации

Как говорилось ранее, по умолчанию точкой трансформации является центр элемента, 50% по горизонтали и 50% по вертикали. Чтобы изменить это положение, может быть использовано свойство transform-origin.

Свойство transform-origin может принимать одно или два значения. Когда задано только одно значение, то оно используется для горизонтальной и вертикальной осей. Если указаны два значения, то первое применяется для горизонтальной оси, а второе для вертикальной.

Отдельно значения похожи на позиционирование фонового изображения с помощью размера или ключевых слов. Таким образом, 0 0 аналогично значению top left, а 100% 100% то же самое, что и bottom right.

HTML

CSS

.box-1 {

transform: rotate(15deg);

transform-origin: 0 0;

}

.box-2 {

transform: scale(.5);

transform-origin: 100% 100%;

}

.box-3 {

transform: skewX(20deg);

transform-origin: top left;

}

.box-4 {

transform: scale(.75) translate(-10px, -10px);

transform-origin: 20px 50px;

}

Следует отметить, что свойство transform-origin в действительности порождает некоторые проблемы, когда одновременно применяется значение translate у трансформации. Так как они оба пытаются позиционировать элемент, их значения могут вступать в противоречие. Используйте их с осторожностью, лишний раз убедившись что получен желаемый результат.

Анимация CSS

Мы недавно видели, что переходы — это просто способ анимации стилевых свойств от исходного до конечного состояния.

Итак, переходы в CSS являются специфическим видом анимации, где:

· есть только два состояния: начало и конец;

· анимация не зациклена;

· промежуточные состояния управляются только функцией времени.

Но что если мы хотим:

· иметь контроль над промежуточными состояниями?

· зациклить анимацию?

· сделать разные виды анимаций для одного элемента?

· анимировать определённое свойство только на половину пути?

· имитировать различные функции времени для разных свойств?

Анимация в CSS позволяет всё это, и не только.

Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

Как и transition, свойство animation является сокращённым для нескольких других:

Свойства анимации:

· animation-name: название анимации;

· animation-duration: как долго длится анимация;

· animation-timing-function: как вычисляются промежуточные состояния;

· animation-delay: анимация начинается спустя некоторое время;

· animation-iteration-count: сколько раз должна выполняться анимация;

· animation-direction: должно движение идти в обратную сторону или нет;

· animation-fill-mode: какие стили применяются до начала анимации и после её завершения.

· animation-play-state: управляет проигрыванием и остановкой анимации

@keyframes

Перед применением анимации к элементам HTML, нам требуется написать анимацию с помощью ключевых кадров. Вообще, ключевые кадры — это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:

· 0% — первый шаг анимации;

· 50% — шаг на полпути в анимации;

· 100% — последний шаг.

Важно!

Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.

Мы можете определить столько ключевых кадров, сколько хотим, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

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

Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием:

@keyframes around {

0% { left: 0; top: 0; }

25% { left: 240px; top: 0; }

50% { left: 240px; top: 140px; }

75% { left: 0; top: 140px; }

100% { left: 0; top: 0; }

}

.move{

position: absolute;

height:100px;

width:100px;

background-color: #444;

animation: around 4s linear infinite;

}

Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite, то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

Animation-name

Название анимации используется, по крайней мере, дважды:

1. при написании анимации с помощью @keframes;

2. при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation).

Например так:

@keyframes whatever {

/*... */

}

.selector { animation-name: whatever; }

Подобно именам классов CSS, название анимации может включать в себя только:

· буквы (a-z);

· цифры (0-9);

· подчёркивание (_);

· дефис (-).

Важно!

Название не может начинаться с цифры или с двух дефисов.

Animation-duration

Длительность анимации может быть задана в секундах (1s) или миллисекундах (200ms).

.selector { animation-duration: 0.5s; }

Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

Комбинация трансформаций

Поиск по сайту