Css transform примеры: transform — CSS | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

2D трансформации. Вращение | CSS: Transform (трансформация объектов)

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Вращение объекта достигается путём использования функции rotate() свойства transform. В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:

deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
rad — Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.

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

Важно: для вращения объекта по часовой стрелке используются положительные значения функции rotate()

Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать «особое» положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами.

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

Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует еще несколько:

rotateX()
rotateY()
rotateZ()

Про rotateZ() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

Точка вращения

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

В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу 🙂

Используя CSS мы можем произвольно изменять точку, вокруг которой будет происходить вращение. Для этого используется свойство transform-origin, оно может принимать от одного до трёх значений одновременно. Третье значение отвечает за ось

z, и к ней мы вернёмся во время изучения 3D трансформаций. Поведение при указании одного или двух значений следующее:

Одно значение: устанавливается точка по оси x. Значение по оси y будет равняться center.
Два значения: устанавливается точки по оси x и по оси y.

В качестве значений могут выступать проценты или специальные ключевые слова top, right, bottom, left, center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

transform-origin: left top
transform-origin: 0% 0%

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

Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создаётся эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

Вращение по одной оси

В самом начале урока говорилось о том, что существуют еще две функции для вращения 2D объектов:

rotateX()
rotateY()

Как можно вращать двумерный объект по одной из осей? Добавим вращение по оси x на 360 градусов c точкой вращения по центру

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

x. Это похоже на качели, которые раскручивают «солнышком», только мы не видим глубину объекта. Вращение по оси y работает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

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

Дополнительное задание

Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition.

Полезные ссылки

Магия CSS. Глава 6. Переходы. “Все, что вам нужно знать о переходах в… | by Workafrolic (±∞)

Fold, folder, foldest

“Все, что вам нужно знать о переходах в CSS”

Перед прочтением этой главы, пожалуйста, прочитайте All you need to know about CSS Transitions от Алекса МакКоя. Это фантастический ресурс, отвечающий на большую часть вопросов.

Переходы

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

Теперь давайте объединим это знание с тем, что мы узнали в предыдущих главах о Цвете и Типографике.

Примеры

Пример 1: Обесцвечивание букв по отдельности

Одним из самых мощных инструментов является свойство transition-delay. Оно отвечает за задержку перед началом перехода. В этом примере мы зададим как будто случайные задержки для каждой буквы, создавая эффект проявления. Очень изящно и привлекательно.

.ex span {
opacity: 0;
transition: opacity 1300ms
}.ex span:nth-child(1)  { transition-delay:  200ms }
.ex span:nth-child(2)  { transition-delay: 1200ms }
.ex span:nth-child(3)  { transition-delay:  800ms }
.ex span:nth-child(4)  { transition-delay:  300ms }
.ex span:nth-child(5)  { transition-delay:  700ms }
.ex span:nth-child(6)  { transition-delay:  600ms }
.ex span:nth-child(7)  { transition-delay:  400ms }
.ex span:nth-child(8)  { transition-delay:  900ms }
.ex span:nth-child(9)  { transition-delay:  700ms }
.ex span:nth-child(10) { transition-delay:   50ms }
.ex:hover span {
opacity: 1
}

Пример 2: Несколько переходов и задержек

CSS переходы по-настоящему раскрывают свой потенциал если их группировать. В этом примере мы укажем два перехода, один для преобразования (transform) и второй — для прозрачности (opacity). Оба указываются через запятую в качестве значения одного свойства transition.

.ex .title span,
.ex .author span {
/* ... */
transition: -webkit-transform 800ms, opacity 800ms
}

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

.ex .title span:nth-child(1) { transition-delay: 360ms, 300ms }
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms }
.ex .title span:nth-child(3) { transition-delay: 480ms, 300ms }
/* ... */

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

.ex .title span,
.ex .author span {
display: inline-block;
opacity: 0;
transition: -webkit-transform 800ms, opacity 800ms
}.ex .title span {
-webkit-transform: translateZ(0) translateY(-6rem)
}.ex .author span {
-webkit-transform: translateZ(0) translateY(6rem)
}.ex:hover .title span,
.ex:hover .author span {
opacity: 1;
transition: -webkit-transform 800ms, opacity 1200ms;
-webkit-transform: translateZ(0) translateY(0)
}. ex .title span:nth-child(1) { transition-delay: 360ms, 300ms }
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms }
.ex .title span:nth-child(3) { transition-delay: 480ms, 300ms }
.ex .title span:nth-child(4) { transition-delay: 540ms, 300ms }
.ex .title span:nth-child(5) { transition-delay: 600ms, 300ms }
.ex .title span:nth-child(6) { transition-delay: 660ms, 300ms }
.ex .title span:nth-child(7) { transition-delay: 720ms, 300ms }.ex .author span:nth-child(1)  { transition-delay: 420ms, 0ms }
.ex .author span:nth-child(2)  { transition-delay: 390ms, 0ms }
.ex .author span:nth-child(3)  { transition-delay: 360ms, 0ms }
.ex .author span:nth-child(4)  { transition-delay: 330ms, 0ms }
.ex .author span:nth-child(5)  { transition-delay: 300ms, 0ms }
.ex .author span:nth-child(6)  { transition-delay: 270ms, 0ms }
.ex .author span:nth-child(7)  { transition-delay: 240ms, 0ms }
.ex .author span:nth-child(8)  { transition-delay: 210ms, 0ms }
. ex .author span:nth-child(9)  { transition-delay: 180ms, 0ms }
.ex .author span:nth-child(10) { transition-delay: 150ms, 0ms }
.ex .author span:nth-child(11) { transition-delay: 120ms, 0ms }
.ex .author span:nth-child(12) { transition-delay:  90ms, 0ms }
.ex .author span:nth-child(13) { transition-delay:  60ms, 0ms }
.ex .author span:nth-child(14) { transition-delay:  30ms, 0ms }.ex:hover .title span,
.ex:hover .author span {
transition-delay: 0
}

Пример 3D

И, если вам интересно, переходы работают и для 3D-преобразований.

.ex .letter {
-webkit-perspective: 20rem
}.ex .front,
.ex .back {
-webkit-backface-visibility: hidden;
transition: -webkit-transform 800ms
}.ex .back {
-webkit-transform: translateZ(0) rotateY(-180deg)
}.ex:hover .back {
-webkit-transform: translateZ(0) rotateY(0deg)
}.ex:hover .front {
-webkit-transform: translateZ(0) rotateY(180deg)
}.ex .letter:nth-child(1) span { transition-delay:  200ms }
. ex .letter:nth-child(2) span { transition-delay:  400ms }
.ex .letter:nth-child(3) span { transition-delay:  600ms }
.ex .letter:nth-child(4) span { transition-delay:  800ms }
.ex .letter:nth-child(5) span { transition-delay: 1000ms }

Конечно же это только верхушка айсберга. Цвета, градиенты, размеры, позиционирование, ориентация и т.д.—ко всему этому списку применимо свойство transition. Кроме того существуют свойства задержки и замедления. Переходы CSS очень просты в использовании. Поверьте, браузер будет делать то, что вы хотите. Transition хорошо поддерживается.

Магия! Аккордеон на радиокнопках

Комбинация состояний в HTML и переходов в CSS открывает широкие возможности для интерактива. Здесь мы используем псевдо-класс :checked для радиокнопок чтобы стилизовать элементы, следующие за ними. Этот метод часто называют “The Checkbox Hack”, но он работает с любыми элементами, для которых применимы псевдо-классы :checked, :focus.

В этом примере много тонкостей, но основная идея: каждая секция аккордеона имеет label, связанный с радиокнопкой при помощи id. И так, три секции, три радиокнопки. Кнопки расположены в документе непосредственно перед содержимым секции, так что мы можем использовать в селекторе + для задания стилей раскрытого состояния секций.

.accordion .baffle {
height: 0
}.accordion input[type="radio"]:checked + .baffle {
height: 10em
}

После нажатия на label кнопка переходит в состояние :checked (и наоборот при повторном нажатии), срабатывает механизм открытия/закрытия соответствующей секции.

И вуаля! Аккордеон на чистом HTML и CSS.

Вдохновение

Если вы ищете вдохновляющие примеры того, что можно сделать при помощи transition — посмотрите эти невероятные демо:

Sidebar Transitions
Page Transitions
Header Effects
Creative Link Effects
Simple Stack Effects
Animations for Thumbnail Grids
Loading Effects for Grid Items

jQuery.

Transit

Для тех, кто любит приправить свой CSS щепоткой JS существует jquery.transit от rstacruz. Для простых статических переходов (оксюморон?) она чрезмерна. Но вы можете найти ей применение в случаях, когда создаете динамические переходы или переходы с пользовательскими переменными.

Внеклассное чтение

Can I Use: CSS Transitions
MDN: Using CSS transitions

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!

Как создать анимацию в css. Девять простых примеров CSS3 анимации. Полное руководство по Flexbox

и всё! Давайте посмотрим как это выглядит в действительности.

Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице.

div >

А вот что находится в файле стилей:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth { margin : 20px auto ; /*внешние отступы сверху и снизу по 20px и выравнивание по середине*/ background : red ; /*красный фон у блока*/ height : 100px ; /*высота блока 100px*/ width : 800px ; /*начальная ширина 800px*/ -webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* свойство с префиксом для браузеров Chrome, Safari, Opera */ animation-name : animWidthSitehere; /* указываем название ключевых кадров (находятся ниже)*/ animation-duration : 5s; /*задаем длительность анимации*/ } /* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere { from { width : 800px ; } to { width : 100px ; } } @keyframes animWidthSitehere { from { width : 800px ; } /*первый ключевой кадр, где ширина блока 800px*/ to { width : 100px ; } /*последний ключевой кадр, где ширина блока 100px*/ }

Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные «построились» автоматически.

Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал.

3. Примеры анимации CSS3 посложнее

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

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

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

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

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

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

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

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3 .

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

Работающие часы на основе CSS3

Работающие часы на CSS3 , в примере используется анимация и фигуры CSS , без изображений или JavaScript :

Демо-версия Скачать

Анимированные облака на CSS3

В данном примере используется только анимация CSS3 :

Демо-версия Скачать

Анимированные иконки погоды на CSS3

Демо-версия Скачать

Анимации загрузки на CSS3

Демо-версия Скачать

3D вращающаяся планета на основе CSS3

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

Демо-версия Скачать

Эффект анимации текста

Демо-версия Скачать

3D анимированная диаграмма

3D диаграмма , созданная с помощью HTML и CSS3-преобразований . Тени созданы с помощью градиентов CSS , анимация — с помощью переходов. AngularJS используется для обновления данных:

Демо-версия Скачать

JQuery эффект анимации снега

Демо-версия Скачать

CSS3-анимации загрузки

Демо-версия Скачать

Анимированная иконка гамбургер-меню на CSS3

Демо-версия Скачать

AT-AT (шагающий броневик из Звездных войн) на CSS3

Пример, который я создал на CSS3 . Можно было бы, конечно, уменьшить количество div , использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией :

Демо-версия Скачать

Gran Turismo

Демо-версия Скачать

3D Солнечная система

Демо-версия Скачать

Анимация дыма

Это CSS3-версия анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript и JQuery эффектов анимации:

Демо-версия Скачать

Анимированный логотип

Демо-версия Скачать

IE10 3D куб

Демо-версия Скачать

Анимация языков пламени на основе CSS3

Демо-версия Скачать

Логотип Бэтмена на -webkit- CSS3 анимация

Демо-версия Скачать

Концепт дизайна погодного приложения на основе CSS

Демо-версия Скачать

Анимация природы на CSS3

Демо-версия Скачать

Гуляющий кот (цикл без JQuery анимации)

Демо-версия Скачать

3D-терминал на CSS3

Демо-версия Скачать

Анимированный график на CSS3

Линейный график на HTML и CSS3 . При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS . Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3 :

Демо-версия Скачать

Вращающиеся 3D HTML-формы с помощью CSS3

Демо-версия Скачать

Анимации индикатора подключения на основе CSS3

Демо-версия Скачать

Steps-анимация на Jquery

Анимации JQuery пример, иллюстрирующий функцию тайминга анимации: steps() в сочетании с листом спрайтов: