Перемещения и трансформации в CSS3. transform:scale(x,y) - масштабирование объекта. Название свойства transition-property

08.05.2019

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

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Введение в CSS-анимацию

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

1. Правило @keyframes

Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.

@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:

H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }

Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).

2. Название анимации animation-name

Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется.

Синтаксис

Div {animation-name: mymove;}

3. Продолжительность анимации animation-duration

Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.

Синтаксис

Div {animation-duration: 2s;}

4. Временная функция animation-timing-function

Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2) . Не наследуется.

animation-timing-function
Значения:
ease	Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) .
linear	Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) .
ease-in	Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) .
ease-out	Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) .
ease-in-out	Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) .
cubic-bezier(x1, y1, x2, y2)	Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации.
step-start	Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start) .
step-end	Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end) .
steps(количество шагов,start\|end)	Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Div {animation-timing-function: linear;}

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

5. Анимация с задержкой animation-delay

Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.

Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

Синтаксис

Div {animation-delay: 2s;}

6. Повтор анимации animation-iteration-count

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

Синтаксис

Div {animation-iteration-count: 3;}

7. Направление анимации animation-direction

Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

Синтаксис

Div {animation-direction: alternate;}

8. Краткая запись анимации

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:

Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .

9. Проигрывание анимации animation-play-state

Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется.

Синтаксис

Div:hover {animation-play-state: paused;}

10. Состояние элемента до и после воспроизведения анимации animation-fill-mode

Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.

animation-fill-mode
Значения:
none	Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards	После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;).
backwards	В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate).

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс:hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

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

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на странице.

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

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.

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

Синтаксис

Div { width: 100px; transition-property: width; } div:hover { width: 300px; }

2. Продолжительность перехода transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

Синтаксис

Div { transition-duration: .2s; }

3. Функция перехода transition-timing-function

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

transition-timing-function
Значения:
ease	Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) .
linear	Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) .
ease-in	Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) .
ease-out	Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) .
ease-in-out	Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) .
cubic-bezier(x1, y1, x2, y2)	Позволяет вручную установить значения от 0 до 1 для кривой ускорения. вы сможете построить любую траекторию перехода.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Div { transition-timing-function: linear; }

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

Рис. 1. Пользовательские функции cubic Bézier с сайта easings.net

Пользовательское название	Значение функции
easeInSine	cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine	cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine	cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad	cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad	cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad	cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic	cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic	cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic	cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart	cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart	cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart	cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint	cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint	cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint	cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo	cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo	cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo	cubic-bezier(1, 0, 0, 1)
easeInCirc	cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc	cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc	cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack	cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack	cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack	cubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

Синтаксис

Div { transition-delay: .5s; }

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition

{transition: transition-property transition-duration transition-timing-function transition-delay;}

Если воспользоваться значениями по умолчанию, то запись

Div {transition: 1s;}

будет эквивалентна

Div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

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

Div {transition: background 0.3s ease, color 0.2s linear;}

Div { transition-property: height, width, background-color; transition-duration: 3s; transition-timing-function: ease-in, ease, linear; }

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

Осуждают то, чего не понимают.
Квинтилиан

П рогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.

Функция CSS3 Transitions

Функция CSS3 Transitions заключается в плавном изменении одного значения свойства CSS на другое. Другими словами, переходы CSS позволяют плавно изменять одно анимированное состояние на другое в течение заданного времени.

Рассмотрим следующую разметку:

#img {
opacity : 1;

transition-duration : 2s ;
transition-delay : 0s ;

}

#img:hover {
opacity : 0 ;
}

Что же из этого следует? А вот что. Если переместить курсор на изображение, то оно начнёт плавно исчезать (transition-property : opacity ) в течении 2 секунд (transition-duration : 2s ), без задержки во времени (transition-delay : 0s ).

Рассмотрим свойства вызывающие переход:

transition-property - указывает имя свойства CSS для эффекта перехода. Эффект перехода обычно происходит тогда, когда пользователь наводит курсор на элемент. Значение по умолчанию "all".
transition-duration - определяет, сколько секунд (s) или миллисекунд (ms) необходимое для завершения эффекта перехода. По умолчанию значение равно нулю, что означает, что переход происходит мгновенно.
transition-delay - определяет, когда эффект перехода начнется. Значение transition-delay указывается в секундах (s) или в миллисекундах (ms). Время может быть отрицательным, в этом случае переход начинается на полпути от его продолжительности. Значение по умолчанию равно нулю.
transition-timing-function - задает скорость эффекта перехода. Это свойство позволяет изменять скорость в течении эффекта перехода.

id="imageWrapper" >
id="backImage" src ="imageB.jpg" />
id="frontImage" src ="imageA.jpg" />

#imageWrapper {
display : inline-block ;
width : 320px ;
height : 240px ;

position : relative ;
}

#imageWrapper img {
width : 320px ;
height : 240px ;
position : absolute ;
transition-property : opacity ;
transition-duration : 2s ;
transition-timing-function : linear ;
}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity : 1 ;
}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity : 0 ;
}

Вот что получилось из этой разметки:

Наведите курсор на изображение, чтобы увидеть эффект CSS3 перехода.

Функция CSS3 Animations

CSS3 Анимация похожа на CSS3 Transitions в том, что они плавно анимации значения CSS с течением времени. Различия (а) как один указывает свойства анимации, (б) каким запускает анимацию и (в) сложность анимации возможно.

Эффект анимации осуществляется с использованием “@keyframes ”. Эффект анимации позволяет элементу постепенно изменяться от одного стиля к другому. Можно изменить столько стилей, сколько вы хотите. Столько раз, сколько вы хотите.

Выглядит так:

@keyframes fadeOut {
from {
opacity : 1 ;
}
to {
opacity : 0 ;
}
}

#img {
animation-duration : 2s ;
animation-delay : 0s ;
animation-timing-function : linear ;

}

Img:hover {
animation-name : fadeOut ;
}

Многие из этих свойств знакомы из обсуждения переходов. Новыми являются:

animation-fill-mode - значение forwards указывает браузеру, что следует остановить анимацию на последнем кадре по окончанию последнего повтора и не отматывать ее к первоначальному состтоянию.
animation-name - указывает имя keyframe , которое вы хотите связать с селектором.
animation-timing-function - указывает скорость анимации. Кривая скорости определяет время анимации, которое используются для перехода от одного набора стилей CSS к другому. Используется для плавного изменения скорости.

Отличие анимации CSS3 заключается в способности определить несколько ключевых кадров, по своим свойствам и промежуточным значениям, которые не должны оставаться в рамках начального и конечного значений. В CSS3 переходах, промежуточные значения всегда прогрессируют от начала до конца, они никогда не выйдут за пределы этого диапазона. Анимация не имеет этого ограничения.

Это позволяет программировать такие эффекты, как показано в разметке и примере ниже:

#bouncingImage {
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
animation-duration : 2s ;
animation-timing-function : ease-in-out ;
animation-fill-mode : forwards ;
}

#bouncingImage:hover {
animation-name : zoomInBounce ;
}

@keyframes zoomInBounce {
from {
transform : scale(1) ;
}

30% {
transform : scale(1.4) ;
}

40% {
transform : scale(1.15) ;
}

50% {
transform : scale(1.35) ;
}

60% {
transform : scale(1.2) ;
}

70% {
transform : scale(1.3) ;
}

80% {
transform : scale(1.225) ;
}

90% {
transform : scale(1.275) ;
}

To {
transform : scale(1.25) ;
}
}

Наведите курсор на изображение, чтобы увидеть эффект.

Свойство 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. В этой статье мы обратимся к основам основ 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 - высота.
Давайте посмотрим на следующий пример.