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


Содержание

Трансформация элементов. Часть 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 был использован.

    СSS3 2D Трансформация

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

    CSS3 трансформация позволяет преобразовывать, поворачивать, масштабировать и наклонять элементы.

    Трансформация — это эффект, который позволяет элементу изменять форму, размер и положение.

    CSS3 поддерживает 2D и 3D преобразования.

    Наведите мышь над элементами, чтобы увидеть разницу между 2D и 3D трансформации:

    Поддержка браузера для 2D трансформации

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

    Номер, за которыми следуют -webkit- , -moz- , или -o- указывает первую версию, которая работает с префиксом.

    Свойство
    transform 36.0
    4.0 -webkit-
    10.0
    9.0 -ms-
    16.0
    3.5 -moz-
    9.0
    3.2 -webkit-
    23.0
    15.0 -webkit-
    12.1
    10.5 -o-
    transform-origin
    (two-value syntax)
    36.0
    4.0 -webkit-
    10.0
    9.0 -ms-
    16.0
    3.5 -moz-
    9.0
    3.2 -webkit-
    23.0
    15.0 -webkit-
    12.1
    10.5 -o-

    CSS 2D Трансформация

    В этой главе вы узнаете о следующих методах 2D трансформации:

    Совет: Вы узнаете о 3D трансформации в следующей главе.

    Метод translate()

    Метод translate() перемещает элемент из текущего положения (в соответствии к параметрам, заданным для оси X и Y).

    В следующем примере элемент

    Пример

    Метод rotate()

    Метод rotate() поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

    Метод в следующем примере, элемент

    Пример

    Использование отрицательных значений повернет элемент против часовой стрелки.

    Метод следующий пример вращает элемент

    Пример

    Метод scale()

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

    Метод в следующем примере элемент

    Пример

    Метод в следующем примере элемент

    Пример

    Метод skewX()


    Метод skewX() наклоняет элемент вдоль оси X на заданный угол.

    Метод следующий пример наклоняет элемент

    Пример

    Метод skewX()

    Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.

    Метод в следующем примере элемент

    Пример

    Метод skewY()

    Метод skew() наклоняет элемент вдоль осей X и Y на заданные углы.

    Метод в следующем примере элемент

    Пример

    Если второй параметр не указан, он имеет нулевое значение. В следующем примере элемент

    Пример

    Метод matrix()

    Метод matrix() объединяет все 2D методы преобразования в один.

    Метод matrix() принимает шесть параметров, содержащих математические функции, что позволяет вращать, масштабировать, перемещать (переводить) и наклонять элементы.

    Метод параметров: matrix(scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY())

    Пример

    Проверьте себя с помощью упражнений!

    Свойства CSS3 трансформации

    Метод в следующей таблице перечислены все свойства преобразования 2D:

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

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

    Вращение

    Один из видов трансформации — вращение элемента. Значение свойства:

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

    ВАЖНО: При трансформации элемент не освобождает пространство для нового положения, а перекрывает другие элементы, как при позиционировании.

    Осью вращения является центр элемента. Свойство transform-origin позволяет указать другое положение.

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

    По оси X бывают такие значения: left , center , right .

    По оси Y бывают такие значения: top , center , bottom .

    Также смещение точки можно указать в единицах изменения CSS и в процентах. Расстояние отсчитывается от левого верхнего угла элемента.

    Укажем это свойство блоку:

    Перемещение

    CSS трансформация даёт возможность переместить элемент относительно его положения в потоке. Значение свойства

    transform: translate(горизонтальное смещение, вертикальное смещение)

    Смещение указывается в единицах измерения CSS. При положительных значениях перемещение происходит вправо и вниз, а при отрицательных влево и вверх.

    Добавим ещё один блок и применим к нему перемещение:

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

    Смещение указывается точно также.

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

    CSS трансформация позволяет менять размеры элемента. Значение свойства:

    transform: scale(X, Y)

    X — число, на которое умножается ширина элемента.

    Y — число, на которое умножается высота элемента.

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

    Если указать отрицательное число, то получится зеркальное отображение элемента.

    Использование свойства CSS изменения размера

    21 октября 2020 | Опубликовано в css | Нет комментариев »

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

    У свойства изменения размера может быть одно из четырех значений, не считая значения наследования:

    none Размер элемента не может быть изменен. Это значение по умолчанию для большинства элементов в большей части таблиц стилей браузеров.
    horizontal Элемент может быть изменен пользователем, но только по горизонтали.
    vertical Элемент может быть изменен пользователем, но только по вертикали.
    both Элемент можно изменять и по горизонтали, и по вертикали.

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

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

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

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

    На момент перевода этого урока поддержка свойства CSS3 изменения размера присутствует во всех последних и многих устаревших версиях браузеров Firefox, Chrome, Opera и Safari, и не поддерживается многими мобильными браузерами, а также браузерами Internet Explorer и Edge.


    Трансформации, переходы и анимации

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

    Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform .

    Вращение

    Для поворота элемента свойство transform использует функцию rotate :

    После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

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

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

    Применение масштабирования имеет следующую форму:

    Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

    Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

    В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

    Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

    Используя отрицательные значения, можно создать эффект зеркального отражения:

    Перемещение

    Для перемещения элемента используется функция translate :

    Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

    К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

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

    С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

    Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

    Наклон

    Для наклона элемента применяется функция skew() :

    Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

    Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

    Или наклон на 45 градусов только по оси Y:

    Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

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

    Комбинирование преобразований

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

    Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

    Исходная точка трансформации

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

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

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

    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 или как одно или более значений «> .

    Эффект плавного изменения размера с помощью CSS3

    Дата публикации: 2013-10-07

    От автора: обращали когда-нибудь внимание, что при изменении размера окна браузера в открытом Gmail (или Asana, или других сайтов) элементы экрана автоматически изменяют свой размер с плавной анимацией? Такое можно сделать с помощью JavaScript’а или jQuery, а можно – с применением переходов CSS3 и селекторов @media.

    Введение в селекторы @media

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Я обычно пользуюсь «заготовкой» 320 и более от Эндрю Дойла (Andrew Doyle).

    Методология «320 и более» состоит в том, что по умолчанию вы создаете дизайн самого маленького разрешения (320px), а затем выстраиваете на его основе каждое более высокое разрешение экрана. Я считаю, что это ведет к более чистому и пригодному в применении CSS.

    Переходы CSS3

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

    Для этого учебника я обработал простую домашнюю страницу. При большом разрешении она состоит из двух колонок, навигации слева и содержимого справа с верхним колонтитулом. После применения медиаселекторов на более маленьких экранах навигация находится вверху, а контент – внизу. С помощью следующего класса CSS3 при изменении размера браузера элементы меняют свой размер через определенный период времени (1 секунда для ширины и 1,5 секунды для левой стороны)

    CSS3 — трансформации

    Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

    Поворот


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

    В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

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

    Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

    Единицы измерения угла поворота CSS3-трансформации

    Единица измерения CSS3-обозначение Описание Пример
    Градусы deg Угол полной окружности 360° rotate(90deg)
    Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
    Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
    Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

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

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

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

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

    Теперь растянем элемент в два раза по оси X:

    Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

    Перемещение

    Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

    Искажение

    Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

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

    Использование нескольких трансформаций

    Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

    Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

    Урок 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. Сохраните файл.

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

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

    CSS 2D Трансформации

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

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

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

    CSS3 поддерживает 2D и 3D преобразования.

    Наведите курсор мыши на указанные ниже элементы, чтобы увидеть разницу между 2D и 3D-преобразования:

    Поддержка браузеров для 2D Преобразований

    Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

    Числа следуют -ms-, -webkit-, -moz- или -o- specify первую версию , которая работала с приставкой.

    Имущество
    transform 36.0
    4.0 -webkit-
    10.0
    9.0 -ms-
    16.0
    3.5 -moz-
    3.2 -webkit- 23.0
    15.0 -webkit-
    12.1
    10.5 -o-
    transform-origin
    (two-value syntax)
    36.0
    4.0 -webkit-
    10.0
    9.0 -ms-
    16.0
    3.5 -moz-
    3.2 -webkit- 23.0
    15.0 -webkit-
    12.1
    10.5 -o-

    CSS3 2D Трансформации

    В этой главе вы узнаете о следующих 2D методов преобразования:

    • translate()
    • rotate()
    • scale()
    • skewX()
    • skewY()
    • matrix()
    Совет: Вы узнаете о 3D — преобразований в следующей главе.

    translate() Метод

    translate() метод перемещает элемент из текущей позиции ( в соответствии с заданными параметрами для оси Х и оси Y.).

    Следующий пример перемещает

    пример

    rotate() Метод

    rotate() метод поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

    Следующий пример поворачивает

    пример

    Используя отрицательные значения будет вращать элемент против часовой стрелки.

    Следующий пример поворачивает

    пример

    scale() Метод

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

    Следующий пример увеличивает

    пример

    Следующий пример уменьшает

    пример

    skewX() Метод

    skewX() метод перекосы элемент вдоль оси Х по данным углом.

    Следующий пример наклоняются

    пример

    skewY() Метод

    skewY() метод перекосы элемент вдоль оси ординат по данным углом.

    Следующий пример наклоняются

    пример

    skew() Метод

    skew() метод перекосы элемент вдоль X и Y оси по заданным углам.

    Следующий пример наклоняются

    пример

    Если второй параметр не указан, то он имеет нулевое значение. Таким образом, следующий пример наклоняются

    пример

    matrix() Метод

    matrix() метод сочетает в себе все 2D преобразования методов в одно целое.

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

    Параметры являются следующие: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :

    пример

    Проверьте себя с упражнениями!

    CSS3 Transform Properties

    В следующей таблице перечислены все 2D преобразования свойства:

    Илон Маск рекомендует:  Курсор сам по себе (IE)
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL