CSS-трансформации. Искажение


Содержание

Урок 1. Трансформация

Цель: изучить применение свойства transform.

  • изучить функцию перемещения элемента translate() ;
  • изучить функцию масштабирования элемента scale() ;
  • изучить функцию вращения элемента rotate() ;
  • изучить функцию искажения элемента skew() .

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

Функция перемещения (сдвига) — translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx, ty)

Здесь:
tx — значение смещения по оси X в пикселях, процентах или других единицах CSS;
ty — смещение по оси Y. Если значение ty не указано, то оно считается равным 0: translate(60px) соответствует translate(60px, 0).

Синтаксис:
transform: translate(50px, 0) РАВНОСИЛЬНО transform: translate(50px)
transform: translate(0, -50px) //сдвиг вверх на 50px
transform: translate(100px, 50px) //сдвиг вправо на 100px и вниз на 50px
transform: translate(-3%)) //сдвиг влево на 3%

Задание №1

1. Создайте html файл.

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

3. Создайте css файл, в котором пропишете стили для нашего квардрата (рисунок 2). В дальнейшем, в этом же файле, будем прописывать свойства трансформации.

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

3. При помощи элемента translate(), функции transform, сделаем так, что бы при наведении курсора мыши квадрат уходил вниз на 50px.
Для этого в нашем файле стилей укажем псевдокласс :hover для нашего стиля .kvadrat (рисунок 4).

Примечание: префиксы -o-; -ms-; -moz-;-webkit- позволяют настроить свойства для конкретного браузера, так как без использования данных префиксов некоторые свойства могут отображаться не корректно.

4. Так же в стиле .kvadrat есть свойство transition: 2s; (позволяет делать плавные переходы между двумя значениями какого-либо CSS-свойства), чтобы квадрат спускался плавно в течении двух секунд.

5. Если вы сделали всё правильно, то при наведении курсора на квадрат должна получиться анимация, как на рисунке 5.

6. Сохраните файл с результатом под названием lab1_transform.html

Функция масштабирования – scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx, sy);

Здесь:
sx — изменение масштаба по оси X;
sy — изменение масштаба по оси Y.
Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает.
Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны: scale(1.2) соответствует scale(1.2, 1.2).
Отрицательные значения отзеркаливают элемент.

Синтаксис:
transform: scale(3, 1]); //увеличение ширины в 3 раза
transform: scale(1, 0.5); //уменьшение высоты в 2 раза
transform: scale(1.5); //увеличение размера в 1,5 раза

Задание №2

В данном задании изучим элемент scale(), который позволяет увеличить или уменьшить элемент.

1. В этом же файле lab1_transform.html создайте квадрат аналогичный квадрату из первого задания с классом kvadrat2.

3. Увеличим его при наведении при помощи элемента scale(). Пусть в нашем задании увеличиваются только верхнии и нижнии границы, при этом в ширину он остается такой же.
Для этого укажем значение scaleY(1.7) . Реализуйте код, как на рисунке 6.

4 В результате должно получиться следующая анимация (рисунок 7):

5. Сохраните файл.

Функция поворота – rotate()

Поворачивает элемент на заданный угол.

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

Синтаксис:
transform: rotate(90deg) //поворот по часовой на 90 градусов
transform: rotate(-180deg) //поворот против часовой на 180 градусов

Задание №3

1. Создайте квадрат аналогичный прошлым с классом kvadrat3.

2. При наведении на квадрат сделаем так, что бы он поворачивался на 360 градусов против часовой стрелки.
Для этого в стиле с псевдоклассом :hover пропишем transform: rotate(-360deg). Так же не забываем, что ранее мы добавляли квадрату свойство transition, поэтому наш поворот будет длиться 2 секунды и обеспечит плавность. Для этого в таблицу стилей добавьте код из рисунка 8.

3. В результате должна получиться анимация, как на рисунке 9.

4. Сохраните файл.

Функция наклона – skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax, ay)

Здесь:
ax — угол наклона по оси X;
ay — угол наклона по оси Y.
Если значение ay не указано, то оно считается равным 0: skew(30deg) соответствует skew(30deg, 0).
Положительное значение угла наклоняет влево, отрицательно значение – вправо.

Синтаксис:
transform: skew(30deg, 60deg)
transform: skew(60deg, 30deg)
transform: skew(30deg) РАВНОСИЛЬНО transform: skew(30deg, 0)

Задание №4

1. Создайте квадрат аналогичный таким же из прошлых заданий с классом kvadrat4.

2. При помощи функции skewX() деформируем наш квадрат относительно оси X, для того что бы трансформировать относительно оси Y функция должна выглядить следующим образом — skewY(), где значение в скобках указывается в градусах, так как меняются углы. Если же писать функцию в виде skew(), то значения осей указываются через запятую — skew(x-угол,y-угол).
В нашем случае мы сделаем искажение на 70 градусов. Стили вы можете увидеть на листинге на рисунке 10.

3. В результате должно получиться следующее (рисунок 11), в данном задании мы не используем эффект «при наведении»:

4. Сохраните файл.

Контрольное задание

В нижеприведенных примерах квадрат анимируется при наведении мыши. Изучите коды примеров. Создайте свой пример, отличающийся от данных.

Transform CSS: теория и примеры трансформации объектов

Третья версия каскадных таблиц стилей привнесла новые свойства для объектов веб-страниц. Это возможность создавать блоки со сглаженными углами, настраивать тени, добавлять прозрачность и градиент, задавать анимацию. О последнем стоит упомянуть подробнее. Если ранее для создания иллюзии движения на страницы добавляли gif-файлы, которые нужно было специально отрисовывать, то сейчас атрибут transform CSS выполняет все действия по анимации объектов автоматически. Осталось научиться его использовать.

Особенности применения свойства

Обычно к трансформация объектов прибегают при наведении на них мышки. Она задаётся для псевдокласса с именем :hover. Изменения затрагивают только один элемент веб-страницы, не влияя на остальные.

Рассматриваемый параметр стилей часто путают с другим – text-transform. CSS чётко разграничивает эти атрибуты. Последний определяет стиль написания текста и применяется только к абзацам веб-страницы, тогда как трансформация в чистом виде используется для всех элементов.

К любому объекту можно добавить:

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

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

Трансформация выполняется относительно центра элемента. При необходимости точка отсчёта смещается. Параметр transform-origin: a b c смещает центр объекта относительно трёхмерной системы координат xyz.

Движение по горизонтали

Простейший вид перемещения – по горизонтали, то есть влево-вправо или вдоль оси x. Для его задания применяют значение свойства translate(x,y).

Поскольку элемент должен перемещаться только в одном направлении, координата y устанавливается y=0. А вот x-координате нужно назначить конкретную величину в пикселях, на которую объект должен быть сдвинут. Отрицательное значение – движение влево, положительное – вправо.

Но простое указание transform CSS не создаст иллюзию движения. Решение – добавить к описанию объекта атрибут transition. Рабочий пример для смещения элемента вправо на 125 пикселей показан ниже.

  • all – установленное значение применяется ко всем параметрам объекта;
  • 2s – длительность эффекта 2 секунды;
  • ease-in-out – медленное движение в начале и в конце.

Перемещение вниз-вверх

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

Свойство transform CSS для класса up в примере ниже демонстрирует плавное перемещение объекта из точки с координатами (0; 0) на 80 пикселей вверх. Класс down задаёт противоположное направление движения – на 80 пикселей вниз.

Анимация в примере осуществляется с постоянной скоростью, на что указывает значение linear.

Диагональный ход

Если объединить рассмотренные перемещения, задаваемые transform, CSS-примеры для диагонального движения получаются просто.

В атрибуте устанавливаются значения для обеих координат. Расстояние смещения задаются пикселями. Куда будет двигаться объект – зависит от знаков. Возможны четыре варианта:

  • x, y положительные – движение вправо вниз;
  • x, y отрицательные – движение влево вверх;
  • x – положительное, y – отрицательное – движение вправо вверх;
  • x – отрицательное, y – положительное – движение влево вниз.

Разобраться с особенностями transform CSS поможет пример.

Если сдвиг по обеим осям выполняется на одинаковое количество пикселей (например, 32), достаточно указать одно число. То есть запись translate(32) соответствует translate(32, 32).

Вращение

После того как возможные способы перемещений рассмотрены, переходим к следующему виду трансформации – вращению. Поворот задаёт значение rotate(Xdeg), где X – градусы (от 0 до 360), на которые объект отклоняется от первоначального положения.

Осталось разобраться с направлением вращения. Вид поворота определяют знаки: плюс – по часовой стрелке, минус – против. При желании можно совместить оба вида поворота – смотрите пример ниже.

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

Следующее значение добавляет масштабирование элемента: scale(a,b). Буквы в скобках – это ширина и высота объекта. Если требуется увеличить размер пропорционально в три раза, достаточно записать scale(3). Уменьшают габариты числа меньше единицы.

Запись атрибута transform CSS можно применить только к горизонтали – scaleX, или только к вертикали – scaleY. Интересные эффекты отражения и тени получатся в том случае, если будут заданы отрицательные значения для scaleY.

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

Новички путают рассмотренное свойство трансформации с атрибутом text-transform CSS. Напоминаем, данный параметр применяется только к тексту. С его помощью управляют регистром написания абзаца символов. Например, после установки lowercase текст преобразуется в строчные буквы, uppercase – в прописные (аналогично нажатой клавише CapsLock на клавиатуре). Чтобы слова начинались с большой буквы, свойству назначают capitalize.

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

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

На этой странице

CSS-свойство transform позволяет вам поворачивать, маштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

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

Синтаксис

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений «> .

CSS трансформации и анимация

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

Илон Маск рекомендует:  Пишем возраст пользователя на php

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

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

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

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

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

div 1 Перемещён вправо -webkit-transform: translate(3em,0);
div 2 Повёрнут на 30 градусов по часовой стрелке -webkit-transform: rotate(30deg);
div 3 Смещён влево и вниз -webkit-transform: translate(-3em,1em);
div 4 Увеличен вдвое -webkit-transform: scale(2);

Без данных трансформаций 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 на несколько записей:

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

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

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

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2.

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

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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.the-art-of-web.com/css/css-animation/#.UWUdVJMvmSr
Перевел: Станислав Протасевич
Урок создан: 10 Апреля 2013
Просмотров: 125054
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

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

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Трансформация элементов. Часть 1.

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

Рис. 171 Пример трансформации в повседневной жизни.

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

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

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
transform (2D) 36.0
4.0
-webkit-
16.0
3.5
-moz-
23.0*
11.5 -o-
15.0 -webkit-
9.0
3.2
-webkit-
10.0
9.0
-ms-
12.0
transform (3D) 36.0
12.0
-webkit-
16.0
10.0
-moz-
23.0
15.0
-webkit-
9.0
3.2
-webkit-
10.0 12.0

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

Наклон элементов

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

И так, рассмотрим пример, в котором мы применим первое преобразование – skew() , оно определяет двухмерное преобразование путем наклона элемента относительно осей X (горизонтальная ось) и Y (вертикальная ось).

Эта функция принимает в качестве параметров только значения в градусах (degree). Обращаю Ваше внимание, что в большинстве случаев высокие значения будут приводить к серьезным искажениям элемента. Как Вы можете заметить, при использовании отрицательных значений элемент будет наклоняться зеркально.

Обратите внимание, что допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси X. Элемент по умолчанию всегда поворачивается относительно своего центра, мы позднее научимся изменять это поведение (изменять исходную точку преобразования).

Результат нашего примера:

Рис. 172 Наклоны элементов в CSS (функция преобразования элемента skew).

Современный стандарт имеет еще две функции, которые позволяют наклонять элементы. Это функция skewX() , она определяет двухмерное преобразование путем наклона элемента относительно оси X и skewY() , которая позволяет наклонить элемент относительно оси Y. Они принимают только одно значение в градусах в качестве параметра.

Давайте рассмотрим их применение.

В этом примере мы использовали для верхнего ряда элементов функцию skewX() , которая позволяет производить наклоны элементов по оси X (горизонтальная ось), а для нижнего ряда элементов использовали функцию skewY() , которая позволяет производить наклоны элементов по оси Y (вертикальная ось). Обратите внимание, что, как и при использовании функции skew() допускается использовать отрицательные значения, наклон при этом будет зеркален положительному значению.

Результат нашего примера:

Рис. 173 Наклоны элементов по осям (функции преобразования элементов skewX и skewY).

Двухмерный поворот элементов

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

Допускается указывать значения угла поворота в следующих единицах измерения:

  • degградусы. Оборот окружности составляет 360deg.
  • gradграды. Оборот окружности составляет 400grad.
  • radрадианы. Оборот окружности составляет 2π (

6.28rad).

  • turnобороты. Оборот окружности составляет 1turn.
  • Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно

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

    В этом примере с использованием функции rotate() мы задали для элементов различные значения поворота элемента при наведении. Значения были указаны в градусах, градах, радианах и в количистве оборотов.

    Результат нашего примера.

    Рис. 174 Двухмерный поворот элементов в CSS (функция преобразования элементов rotate).

    Трехмерный поворот элементов

    Следующие функции, которые мы рассмотрим, позволяют вращать элементы в трехмерном пространстве. Мы начнем знакомство с трехмерными преобразованиями с функций rotateX() , rotateY() и rotateZ() . Как вы можете догадаться, каждая из них по отдельности контролирует вращение элемента по определенной оси в пространстве.

    Рис. 175 Схема вращения элементов по осям X, Y и Z.

    Перейдем к примеру, в котором рассмотрим применение этих функций.

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

    Результат нашего примера:

    Рис. 176 Трехмерный поворот элементов по осям (функции преобразования элементов rotateX, rotateY и rotateZ).

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

    Функция rotate3d() имеет следующий синтаксис:

    Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (X, Y, Z), а последний параметр определяет угол, задаваемый в градусах. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов).

    Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X, по оси Y на (50 * 1 / 2) = 25 градусов и по оси Z вращение не происходит.

    Рассмотрим следующий пример:

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

    Результат нашего примера:

    Рис. 177 Трехмерный поворот элементов (функция преобразования элемента rotate3d).

    Масштабирование элементов

    Следующая функция scale() , она определяет двухмерное преобразование путем масштабирования элемента по оси X и по оси Y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси X, так и по оси Y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси X, так и по оси Y).

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

    Рассмотрим пример использования:

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

    Результат нашего примера:

    Рис. 178 Пример масштабирования элементов (функция преобразования элемента scale).

    По аналогии с предыдущими функциями Вы можете производить масштабирование элементов и для конкретной оси, для этого в CSS существуют функции преобразования scaleX() , scaleY() и scaleZ() .

    Рассмотрим их в следующем примере:

    Для демонстрации работы трехмерного масштабирования функцией scaleZ() , мы добавили несколько функций для элемента перечисленных через пробел. Функция rotateX() поворачивает наш элемент по оси X при наведении, а новая для Вас функция преобразования perspective() определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. Мы еще вернемся к более подробному изучению этой функции в следующей статье учебника.

    Результат нашего примера:

    Рис. 179 Масштабирование элементов по осям (функции преобразования элементов scaleX, scaleY и scaleZ).

    Трехмерное масштабирование элементов

    Следующая функция, которую мы рассмотрим это функция scale3d() , она определяет трехмерное преобразование путем масштабирования элемента по оси X, по оси Y и по оси Z. Перейдем к примеру:


    В этом примере были использованы различные значения функции scale3d() , благодаря которой, мы масштабируем элемент сразу по трём осям. Для демонстрации работы трехмерного масштабирования функцией scale3d() , мы добавили функцию rotateX() , которая поворачивает наш элемент по оси X и функцию преобразования perspective() , которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.

    Результат нашего примера:

    Рис. 180 Трехмерное масштабирование элементов по осям (функция преобразования элемента scale3d).

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

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

      Практическое задание № 34.

      Подсказка: для отдаления, либо приближения изображения Вам необходимо воспользоваться вышерассмотренной функцией scale() . Кроме того, Вам необходимо скрывать переполнение внутри блока с изображением, для этого Вам поможет CSS свойство overflow .

      В следующем практическом примере я предлагаю Вам создать красивое меню навигации. Ранее мы не рассматривали создание навигации, но в этом нет ничего сложного. В большинстве случаев навигация основана на том, что при наведении на определённый элемент отображаются скрытые элементы. Отображение элементов в большинстве случаев осуществляется за счет измененения значения свойства display со значения none (элемент не отображается) на, например, block (если нам необходимо после отображения увидеть блочный элемент). Это не единственный способ как можно скрывать элементы меню и так как эта тема, напомню, трансформирование элементов, то мы с Вами рассмотрим скрытие с помощью функции scaleY() .

      Я предлагаю следующую структуру нашего горизонтального меню навигации:

      Базовое задание: чтобы сделать нашу навигацию горизонтальной основные элементы необходимо будет разместить в линейку ( inline-block ) и при наведении на них необходимо будет отображать вложенные элементы (маркированные списки). Попробуйте отобразить их с помощью изменения свойства display со значения none (элемент не отображается) на block , а уже позже после этого подумайте как это можно сделать с помощью функции scaleY() .

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

      Меню навигации, которое у Вас должно получиться (размеры и цвет элементов могут быть произвольными):

      Практическое задание № 35.

      1. Базовое задание: чтобы, вложенные списки не влияли на структуру основного меню навигации укажите для них абсолютное позиционирование (position: absolute ), а для элементов основного меню относительное позиционирование (position: relative ). Функция scaleY() со значением 0 скроет элемент, а со значением 1 отобразит.
      2. Продвинутое задание: чтобы задать наклон для четных и нечетных элементов списка воспользуйтесь псевдоклассом :nth-child и функцией skewX() .
      3. Сложное задание: чтобы убрать наклон у текста Вам необходимо применить обратную трансформацию, то есть если у нас элемент списка наклонен на положительное количество градусов, то гиперссылка (элемент ), должна быть наклонена на тоже число градусов, но уже с отрицательным углом. Вторая проблема выбрать четные и не четные элементы , так как они являются единственными детями своих родителей. Выбрать их селектором :nth-child у нас не получится, вернее не получится выбрать четные элементы, так как их по просту нет. Один из вариантов использовать отдельные классы, либо атрибуты. Я предлагаю использовать HTML 5 глобальный атрибут data-*, который позволяет создавать пользовательские атрибуты. После этого Вам необходимо будет просто применить селекторы атрибутов. У меня получилась следующая структура:

    Хочу еще раз напомнить Вам, что когда Ваши элементы имеют блочно-строчную структуру, то необходимо их писать внутри HTML в линейку, во избежании пробельных символов, которые появляются при переносе HTML кода на новую строку. В нашем примере это не очевидно, но когда вы будуете использовать процентные значения это может нарушить Вашу верстку. Более подробно об этом было рассмотрено ранее в статье «Размеры блочных элементов в CSS».

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

    Примеры свойства transform в CSS

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

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

    Эффекты трансформации можно увидеть при наведении мыши на элементы. демо

    Поворот кнопки transform: rotate

    Сделаем так, что при наведении курсора, кнопка повернется на 15 градусов. Для этого создадим для кнопки класс .button_rotate и пропишем в псевдокласс hover (состояние при наведении) свойство transform: rotate.

    .button_rotate:hover <
    background-color: #4feac8;
    transform: rotate(15deg);
    >

    Обратите внимание, что теперь мы добавили свойство transform не к элементу, а к его состоянию, в отличии от transition. Благодаря тому, что свойство transition со значением all все ещё прописано у элемента, то сама трансформация при наведении происходит плавно. Таким образом, прописав all, мы убиваем двух зайцев, плавный переход работает как для замены цвета, так и для поворота кнопки при наведении.

    transition: all 1s ease;

    Перемещение кнопки transform: translate

    CSS свойство translate – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.

    .button_translate:hover <
    background-color: #4feac8;
    transform: translateX(50%);
    >

    Масштабирование кнопки transform: scale

    CSS свойство scale – масштабирует кнопку как в сторону увеличения, так и уменьшения, в зависимости от заданного значения.

    .button_scale:hover <
    background-color: #4feac8;
    transform: scale(2); /* Увеличивает в 2 раза */
    >

    Искажение кнопки transform: skew

    CSS свойство skew – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.

    .button_skew:hover <
    background-color: #4feac8;
    transform: skew(20deg);
    >

    Как насчет кроссбраузерности?

    Идем на сайт Can I Use и проверяем. Все вышеперечисленные свойства поддерживают почти все обновляемые браузеры, кроме Opera Mini.

    Проблема наблюдается, как всегда у старых браузеров IE и Safari, которая вполне решаема, если добавить в код с псевдоэлементом hover, следующие префиксы с соответствующими свойствами.

    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Safari */

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

    Анимация кнопки с помощью transform rotate

    Давайте сделаем кнопку с иконкой, при наведении на которую, шестеренки будут весело и быстро вращаться, сделав один полный оборот.

    Как всегда, начнем с HTML разметки:

    В CSS создадим класс для кнопки:

    .button_anime <
    background-color: #2bc6a4;
    border: none;
    border-radius: 15px; /* Закругляем углы */
    color: #fff;
    display: block; /* Это блоковый элемент */
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 25%;
    margin: auto;
    font-family: sans-serif;
    font-size: 22px;
    text-decoration: none;
    transition: all 1s ease; /* Плавный переход */
    line-height: 39px; /* Вертикальное выравнивание текста */
    >

    Для иконки подбираем позиционирование относительно блока с кнопкой.

    img <
    position: relative;
    left: -245px;
    top: 6px;
    border: none;
    transition: all 1.5s ease; /* плавное вращение, без transition эффект не виден */
    >

    Важно! Распространенная ошибка новичков, в том, что они не прописывают свойство transition для анимируемого элемента. Без transition в селекторе img, вращение иконки будет происходить настолько быстро, что мы его не заметим.

    Ну и последний фрагмент CSS кода, отвечает за само действие transform. При наведении на иконку, она поворачивается на 360 градусов.

    .button_anime:hover img <
    transform: rotate(360deg); /*Поворот иконки на 360 градусов*/
    >

    Пример вращения иконки при наведении курсора находится в самом низу демо-страницы: демо

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Свойство CSS transform

    Свойство CSS transform (от слова «трансформация») позволяет видоизменять элемент на html-страницах. Например, можно

    • вращать
    • смещать
    • изменять масштаб
    • наклонять
    • комбинировать выше описанные действия

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

    1. Синтаксис CSS transform

    Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

    Примечание про браузеры

    Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

    • -ms-transform — для IE9 и старше (младше девятой версии трансформация не поддерживается
    • -webkit-transform — для Chrome, Safari, Andro >-o-transform — для Opera до версии 12.10
    • -moz-transform — для Firefox до версии 16.0

    2. transform:rotate(x) — вращение объекта

    Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

    Пример #1. Вращение объекта в html через трансформацию

    На странице преобразуется в следующее

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

    Пример #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 доступно по следующим свойствам:

    Возможно, вы зададите вопрос «а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?» Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

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

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

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

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

    Синтаксис transform

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

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

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

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

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

    2d rotate

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

    Демонстрация rotate

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

    2d scale

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

    Демонстрация scale

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

    Демонстрация множественного масштабирования

    2d translate

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

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

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

    Демонстрация translate

    2d skew

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

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

    Демонстрация skew

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

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

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

    Демонстрация комбинации транформаций

    За каждой трансформацией также стоит матрица, явно определяющая поведение transform . Использование значений rotate , scale , transition и skew обеспечивает простой путь задать эту матрицу. Тем не менее, если вы расположены к математике и предпочитаете глубже погрузиться в преобразования, попробуйте свои силы в использовании значения matrix .

    Демонстрация двумерного куба

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

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

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

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

    Демонстрация transform-origin

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

    Перспектива

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

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

    Использование значения perspective в свойстве transform прекрасно работает для преобразования одного элемента относительно единичной уникальной перспективы. Если вы желаете преобразовать группу элементов с одинаковой перспективой или точкой схода, то применяйте свойство perspective для их родительского элемента.

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

    Демонстрация значения perspective

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

    Демонстрация свойства perspective

    Глубина перспективы

    В качестве значения перспективы может быть задано none или длина. Значение none отключает любую перспективу, в то время как значение длины установит глубину перспективы. Чем выше значение, тем дальше вид перспективы, создавая тем самым перспективу довольно низкой интенсивности и небольшое трёхмерное изменение. Низкое значение приближает вид перспективы, тем самым создавая перспективу высокой интенсивности и большое трёхмерное изменение.

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

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

    Начало перспективы

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

    Демонстрация perspective-origin

    Трёхмерная трансформация

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

    3d rotate

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

    Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.

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

    Демонстрация 3d rotate

    3d scale

    При использовании scaleZ для трёхмерных преобразованиях элементы могут масштабироваться по оси z. Это не очень интересно, когда никаких других трёхмерных преобразований нет, так как нечего, в частности, и масштабировать. В демонстрации ниже масштаб элементов увеличивается и уменьшается по оси z, при этом добавляется значение rotateX , чтобы увидеть поведение scaleZ . При удалении rotateX элементы будут выглядеть не изменёнными.

    Демонстрация 3d scale

    3D translate

    Элементы могут также передвигаться по оси z с помощью значения translateZ . Отрицательное значение будет толкать элемент дальше по оси z, что приводит к уменьшению элемента. Положительное значение будет тянуть элемент ближе по оси z, что приводит к увеличению элемента.

    Хотя это может показаться очень похоже на двумерную трансформацию scale , на самом деле у них есть различия. Преобразование происходит по оси z, а не по осям х или у. При работе с трёхмерными преобразованиями возможность переместить элемент по оси z даёт серьёзные преимущества, как при построении куба в примере ниже.

    Демонстрация 3d translate

    3D skew

    skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.

    Сокращённые трёхмерные трансформации

    Как и в случае комбинаций двумерных преобразований, есть также значения для записи сокращённых трёхмерных преобразований. Эти значения включают rotate3d , scale3d , transition3d и matrix3d . Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!

    transform-style

    В некоторых случаях трёхмерные трансформации будут применяться к элементу, вложенному в родительский элемент, который в свою очередь также трансформируется. В этом случае вложенные преобразованные элементы не будут появляться в своём собственном трёхмерном пространстве. Чтобы позволить вложенным элементам трансформироваться в их собственной трёхмерной плоскости применяется свойство transform-style со значением preserve-3d .

    Свойство transform-style должно быть добавлено к родительскому элементу, выше любых вложенных преобразований. Значение preserve-3d позволяет преобразованным дочерним элементам появляться в их собственной трёхмерной плоскости, в то время как значение flat заставляет преобразованные дочерние элементы лежать в двухмерной плоскости.

    Демонстрация transform-style

    Чтобы увидеть дополнительный пример использования свойства transform-style в действии прочитайте объяснение WebKit.

    backface-visibility

    При работе с трёхмерными преобразованиями, элементы время от времени трансформируются таким образом, что их поверхность отворачивается от экрана. Это может быть вызвано установкой значения rotateY(180deg) , к примеру. По умолчанию эти элементы показываются с обратной стороны. Так что если вы не желаете видеть эти элементы вообще, установите свойство backface-visibility как hidden , и вы спрячете элемент всякий раз, когда он отворачивается от экрана.

    Другим значением для backface-visibility является значение по умолчанию visible , оно всегда показывая элемент, независимо от того, в каком направлении он смотрит.

    В демонстрации ниже обратите внимание, что второй блок не отображается, поскольку установлена запись backface-visibility: hidden . Свойство backface-visibility имеет более важное значение при использовании анимации.

    Баг при использовании “transform: scale();”

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

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

    CSS-трансформации. Искажение

    В этом уроке мы рассмотрим, как создать анимацию изображений с помощью таких свойств, как transform CSS и transition-duration CSS.

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

    Свойство transition-duration CSS позволяет задать время анимации в секундах, т.е. сделать трансформацию плавной.

    Рассмотрим на примере.

    Увеличение масштаба изображения.

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

    Илон Маск рекомендует:  Использование xf в конфигурационных файлах
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL