Как перевернуть блок в css

Например, прямой угол составляет 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() .

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

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

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

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

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

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

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

Свойство CSS transform

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

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

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

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

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

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

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

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

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

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

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

Пример #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 при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

How to rotate a 90 degrees?

I have a that I want to rotate 90 degrees:

How can I do this?

6 Answers 6

Help us improve our answers.

Are the answers below sorted in a way that puts the best answer at or near the top?

You need CSS to achieve this, e.g.:

(There’s 45 degrees rotation in the demo, so you can see the effect)

Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-

Update 2018: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks @rinogo)

Похожие публикации:

1. В чем основная задача css
2. Для чего необходимы css
3. Как сделать расстояние между элементами списка css
4. Как сделать слайдер в html и css

Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

Главная » Разное » Как повернуть блок в css

Как повернуть блок в css

Функция transform: rotate

Трепачёв Д.П. © 2012-2018 г.

Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.

Функция transform: rotate() задает поворот элемента на заданное количество градусов. Положительное значение поворачивает по часовой стрелке, отрицательное — против. Поворот осуществляется вокруг точки, задаваемой свойством transform-origin (по умолчанию это центр элемента).

См. также функции transform: rotateX, transform: rotateY, transform: rotateZ, а также функцию transform: rotate3d.

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

Синтаксис

Значения

Значение по умолчанию: 0deg.

Примеры

Пример

В данном примере блок повернут на 30 градусов по часовой стрелке:

Результат выполнения кода:

Пример

В данном примере блок повернут на 30 градусов против часовой стрелки:

Результат выполнения кода:

Пример

В данном примере блок по наведению повернется на 1 оборот, так как значение поворота задано в 1turn (такого же эффекта можно добиться, если задать угол поворота в 360deg). Для плавности поворота добавлено свойство transition:

Результат выполнения кода:

Поворот текста CSS. Просто

Привет. Сегодня рассмотрим как можно осуществить поворот текста CSS и больше ничего. Такая задача может возникнуть (у нас неоднократно возникала), и решается она на чистом CSS3, без картинок и Javascript.

Задача: поворот текста CSS

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

Решение: поворот текста CSS

Решение кроется во встроенной в CSS директиве transform. Которая поворочивает по сути любой блок, в котором её указывают. Работает в 60% браузеров с использованием префикса (-webkit, -moz и т.д.), а в 40% — без использования. Ниже приводим таблицу совместимости с браузерами, практически везде работает, как видите.

Итак, рассмотрим поворот текста css на примере кода.

Текст, который мы повернем

И осуществим поворот текста CSS:

Этот код будет осуществлять поворот текста CSS. Результат можно посмотреть на jsFiddle:

Как видите, текст успешно повернулся, по сути, с помощью этого кода можно повернуть любой блок на CSS. В качестве параметра передаётся значение угла поворота (положительное или отрицательное) и указатель, что это угол «deg».

Также директиву transform можно использовать с другими функциями (не только rotate).Также можно растянуть scale, растянуть по горизонтали (scaleX) или вертикали (scaleY), или исказить в проекции (skew), и по аналогии skewX и skewY. Кроме того, можно сдвинуть по вертикали или по горизонтали или и вертикали и горизонтали на заданное число пискелей (translate, translateX, translateY), или вообще задать матрицу преобразований, в которой будут заданы все возможные искажения блока только при помощи CSS.

Надеюсь, эта статья помогла вам решить поставленную перед вами задачу осуществить поворот текста CSS. Если остались вопросы задавайте в комментарии или в зелёную кнопку «Задать вопрос специалистам».

Хотите узнать больше разных решений, добро пожаловать на мини-курсы по веб-разработке: http://webformyself.com/minikurs/5techniques/

Понравилась или помогла статья? Купите мне кофе

Как повернуть псевдоэлемент css

Я хочу воссоздать этот значок с помощью псевдо-элементов css (в качестве индикатора переключения):

Я создал nececcary псевдо элементы с помощью ::after, ::before и попытался повернуть их, используя transform: rotate(90deg).

Как я могу заставить их вращаться вокруг своего центра? Я пробовал transform-origin: 50% 50%;, который не работает. Прямо сейчас оба псевдоэлемента получили те же right: 10px;, но они не размещены друг над другом, а они рядом друг с другом.

Вы можете проверить этот JS FIDDLE, чтобы проиллюстрировать проблему.

задан Marian Rick 27 июля ’16 в 15:38

2.20. CSS3-трансформации

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

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block;, а также элементы, значение свойства display которых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption. Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

Существуют два вида CSS3-трансформаций – 2D и 3D. 2D-трансформации преобразовывают элементы в двухмерном пространстве.

2D-трансформации элементов

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

IE: 10.0, 9.0 -ms- Edge: 12.0 Firefox: 16.0, 3.5 -moz- Chrome: 36.0, 4.0 -webkit- Safari: 9.0, 3.1 -webkit- Opera: 23.0, 15.0 -webkit- iOS Safari: 9, 7.1 -webkit- Android Browser: 53, 2.1 -webkit- Chrome for Android: -webkit-

1. Функции 2D-трансформации transform

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

Допустимые значения:

matrix() — любое число translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), % scale(), scaleX(), scaleY() — любое число rotate() — угол (deg, grad, rad или turn) skew(), skewX(), skewY() — угол (deg, grad, rad)

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

See the Pen EaNbLX by HeleN (@nazarelen) on CodePen.

2. Точка трансформации transform-origin

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

See the Pen aNQNva by Elena Nazarova (@nazarelen) on CodePen.

3. Множественные трансформации

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

4. Трансформации на практике: как сделать ленточки

See the Pen BKGZPP by Elena Nazarova (@nazarelen) on CodePen.

Как перевернуть картинку в css

От автора: видели когда-нибудь вебсайт, показывающий слегка повернутые изображения-пиктограммы? Это простой эффект, придающий налет зрительной индивидуальности. Притом, если вы не можете добиться этого поворота с помощью CSS, то трудитесь слишком тяжко! Узнайте, как сделать вращение в CSS3 правильно!

Введение

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Генерация пиктограмм в CMS: Если вы пользуетесь CMS (такой, как WordPress), ваши пиктограммы, скорее всего, создаются автоматически. Применив вышеописанный метод PSD, вам придется создавать вручную и выгружать в свою CMS каждую пиктограмму в отдельности. Кроме того, если у вас уже есть существующий сайт, но вы хотите применить к пиктограммам эффект поворота, то придется создать их все заново в Photoshop’е, а затем опять выгрузить!

Долгосрочная управляемость: Скажем, вы сделали все свои пиктограммы слегка повернутыми, а теперь хотите их перестроить и перепланировать свою галерею. Это означает, что придется заново их все сгенерировать. Если вы управляли пиктограммами в Photoshop’е, то значит, придется подогнать и заново сохранить каждую отдельную пиктограмму.

Разве не здорово, если можно было бы представить это небольшое вращение одной строкой кода? Так можно сделать поворот в CSS! Давайте узнаем, как.

Шаг 1: Понимание своей цели

Краткий обзор того, что мы пытаемся выполнить, раскрывает следующие шаги:

Создайте изображение-пиктограмму в Photoshop’е (не повернутую)

Вставьте пиктограмму с помощью тэга img

Замаскируйте ее соответственно с помощью CSS (обдумайте применение масок Photoshop’а)

Поверните пиктограмму внутри маски с помощью CSS3

Чтобы убедиться, что наша галерея нормально деградирует, шаги 1-3 будут выполнены с помощью CSS. Шаг 4 (эффект поворота) – с помощью CSS3.

Шаг 2: Признание размера пиктограммы и увеличения угла поворота

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

Если наши пиктограммы слишком маленькие, а поворачиваем мы их под слишком большим углом, то в некоторых углах окажется пустое пространство. Как здесь:

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

Помните о важном: изображение-пиктограмма всегда будет больше, чем маска изображения (размер пиктограммы > размер маски)

Предупреждение тем, кого отпугивает математика

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

Шаг 3: Пропорциональное соответствие

Чтобы избежать показа в маске пустого пространства, нужно определить ОДНО из следующего:

Размер действительной пиктограммы

Размер маски изображения (видимой части пиктограммы)

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

Шаг 4: Определение размеров

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

Определите размер маски изображения: 180×240 px

Найдите длину стороны по диагонали

— Примените теорему Пифагора ( a 2 + b 2 = c 2 )

—- Первая сторона (a) равна 180px

—- Вторая сторона (b) равна 240px

—- Итак, 180 2 + 240 2 = c 2 (длина по диагонали)

—- 300 = c (возьмите квадратный корень каждой из сторон)

— Длина по диагонали (c) равна 300

Длина по диагонали – важное число. Чтобы нашу пиктограмму можно было вращать на все 360°, ее самая короткая сторона должна равняться самой длинной стороне маски изображения. (Даже если вам это не нужно, обеспечение поворота на 360° даст возможность в будущем менять его угол без необходимости изменения размеров пиктограмм).

Шаг 5: Расчет размера пиктограммы

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

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

Самая большая сторона маски (300) равна самой короткой стороне пиктограммы (x)

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

— 180 : 300 (высота маски : высота пиктограммы)

— 240 : y (длина маски : длина пиктограммы)

Чтобы решить пропорцию, перемножьте крест-накрест

y = 400 (длина пиктограммы)

Теперь размеры маски и пиктограммы определены. Мы знаем, что если маска изображения у нас 180x240px, то изображение-пиктограмма внутри нее должно быть 300x400px, давая возможность вращения на 360°.

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

Шаг 6: Наконец немного HTML

Теперь, когда известны все размеры, давайте создадим повернутые пиктограммы, начав с базового HTML.

Свойство transform

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

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

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

Матрица преобразования также зависит от значения свойства transform-origin , которое используется для указания исходного положения преобразования.

Система координат

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

При применении CSS transform начало системы координат переносится в центр элемента. Это происходит потому, что значение свойства transform-origin , применяемое по умолчанию, равно 50%50. После этого все преобразования применяются к элементу на основании нового положения системы координат.

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

Если с помощью свойства transform вы вращаете или наклоняете элемент, то же самое происходит с системой координат, и все последующие преобразования будут применяться на основе новой системы координат. Поэтому порядок преобразований имеет значение, разные последовательности приведут к различным преобразованиям. Это имеет смысл, потому что преобразования переводятся в матрицы, а умножение двух матриц в математике дает разные результаты в зависимости от порядка этих матриц. Например, а х b не дает тот же результат, что b х а ( если ни одна из них не является единичной ).

Если нужно переместить элемент с помощью CSS text transform в другое положение и повернуть его в новом положении, вы должны сделать это в указанном порядке: переместить, а затем повернуть. Если вы повернете элемент, то повернется его система координат, и перемещение в определенном направлении не приведет к ожидаемому результату.

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

Примечания

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

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

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

Когда элемент преобразуется, значение fixed для свойства background-attachment рассматривается, как значение scroll . Вычисленное значение background-attachment не претерпевает изменений.

Кроме transform-origin при преобразовании могут использоваться свойства perspective и perspective-origin , чтобы задать для сцены глубину, а свойство transform-style — чтобы сохранить определение трехмерного пространства. Это полезно при выполнении вложенных CSS-преобразований . Все эти свойства используются в сочетании друг с другом для создания CSS-преобразования в двух или трех измерениях.

Официальный синтаксис

• Синтаксис:

• Исходное значение: none
• Применяется к: трансформируемому элементу
• Анимируемо: да

Примечания

— это список из функций преобразования.

Значения

Можно применить к элементу преобразование, используя одно из следующих значений свойства transform :

• CSS transform rotate ()
• translateX()
• translateY()
• scale()
• scaleX()
• scaleY()
• rotate()
• skew()
• skewX
• skewY
• matrix()
• translateZ
• translate3d()
• scaleZ()
• scale3d()
• rotateX()
• rotateY()
• rotateZ()
• rotate3d()
• matrix3d()
• perspective()

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

Функции 2D-преобразований:

translate()

Функция CSS transform translate используется для перемещения элемента по вектору [tx, ty] , где tx — смещение по оси х , а ty — смещение по оси у . Если ty не указано, то его значение считается равным нулю, а элемент перемещается только вдоль оси х . Если единицы измерения не указаны, число будет рассматриваться как » пользовательские единицы «.

Положительное значение смещения перемещает элемент в направлении оси, а отрицательное значение — в направлении, противоположном направлению оси.

Результат применения к элементу смещения:

translateX()

Функция CSS transform translateX() используется, чтобы переместить элемент на заданное расстояние вдоль оси х . Значение tx задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться как » пользовательские единицы «.

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

translateY()

Функция translateY() используется для перемещения элемента на заданное расстояние вдоль оси Y . Значение ty задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться, как » пользовательские единицы «.

Положительное значение смещения перемещает элемент вдоль направления оси y , а отрицательное значение — в противоположном направлении.

scale()

Функция CSS transform scale используется для масштабирования ( растягивания или сжатия ) элемента путем изменения его размеров в большую или в меньшую сторону. Она принимает в качестве значения одно или два числа без единиц измерения, sx и sy , где sx изменяет размеры элемента по оси х , а sy — по оси у . Если указано только одно значение ( sx ), второе значение ( sy ) будет рассматриваться, как равное первому.

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

Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно нулю, то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента в определенном направлении.

На следующем рисунке показан результат применения к изображению различных преобразований scale() . Первое слева — изображение без каких-либо преобразований. Второе — результат применения transform: scale(2); , третье — результат применения transform: scale(0.5) , а четвертое — результат применения transform: scale(0.5, 1.5); .

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

Следующее изображение является результатом применения преобразования CSS transform scale ( и его вариаций ) с отрицательными значениями:

scaleX()

Функция scaleX() используется для масштабирования, растягивания или сжатия элемента, делая его больше или меньше, по оси х . Она принимает в качестве значения число sx , которое используется для изменения размера элемента по оси х .

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

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

scaleY()

Функция CSS transform scaleY() используется для масштабирования, растягивания или сжатия элемента в размерах по оси у . Она принимает в качестве значения число sу , которое используется для изменения размера элемента по оси y .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть выше по оси y . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно 0 , то элемент исчезает.

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

rotate()

Функция rotate() используется для вращения элемента в двухмерном пространстве. Элемент поворачивается на угол, который передается функции. Элемент вращается вокруг начала координат, как это определено свойством transform-origin .

Положительное значение задает вращение элемента по часовой стрелке. Отрицательное значение — против часовой стрелки.

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

Функция skew() используется для наклона ( скоса ) элемента. Наклон элемента выглядит, как применение для него эффекта скоса. Функция принимает один или два аргумента: ax и ay . Оба являются значениями углов. Первое значение ( ах ) скашивает элемент вдоль оси х , а второй аргумент ( ау ) — вдоль оси у .

Скашивание вдоль оси х похоже на то, если бы мы потянули противоположные углы в противоположные стороны, а скашивание вдоль оси у — если бы мы потянули противоположные углы вертикально в противоположных направлениях ( вверх и вниз ). Два значения определяют величину, на которую скашивается элемент. Если второе значение не указано, оно считается равным 0 .

Функция transform skew CSS присутствовала в ранних версиях спецификации. Она был удалена из нее, но по-прежнему присутствует в некоторых реализациях. * Не используйте ее *. Чтобы скосить элемент в любом направлении, используйте функции skewX() и skewY() , описанные ниже. Также обратите внимание на то, что поведение функции skew() отличается от умножения преобразований skewX() и skewY() .

skewX()

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

Функция принимает в качестве значения ax . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов ( ах ).

Если значение угла положительное, » растягиваются » левый верхний и нижний правый углы прямоугольника. Если значение отрицательное — верхний правый и нижний левый угол. При значении угла в 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

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

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

skewY()

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

Функция CSS transform принимает в качестве значения ау . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов – ау .

Если значение угла положительное, » растягиваются » левый верхний и нижний правый угол прямоугольника. Если значение отрицательное — верхний правый и нижний левый. При значении угла 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

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

Следует помнить, что наклон элемента также искажает его систему координат.

matrix()

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

С помощью функции CSStransform matrix можно объединить эти два преобразования в одну матрицу:

Вычислить значения функции matrix3d() будет нелегко. К счастью, Эрик Мейер и Аарон Густафсон создали весьма полезный инструмент , который может выполнить расчеты вместо вас. Все, что нужно сделать, это ввести значения transform , которые вам нужны, и нажать на красную кнопку, чтобы инструмент сгенерировал для вас эквивалентную функцию matrix() .

Функции 3D-преобразования:

translateZ()

Функция translateZ() используется для перемещения элемента на заданное расстояние вдоль оси z . Значение tz задается в единицах длины ( проценты здесь не допускаются ). Если единицы измерения не указаны, число будет рассматриваться, как » пользовательские единицы «.

Положительное значение перемещает элемент вдоль положительного направления оси z , а отрицательное значения — в противоположном направлении.

translate3d()

Функция translate3d() является трехмерным аналогом функции CSS transform translate . Она используется, чтобы переместить элемент по вектору [tx, ty, tz] , где tx — смещение вдоль оси х , ty — смещение вдоль оси у , а tz — смещение вдоль оси z . Значения tx и ty указываются в единицах длины или процентах. Значение tz должно указываться в единицах длины и не может задаваться в процентах. Если единицы измерения не указаны, число будет рассматриваться, как » пользовательские единицы «.

Положительные значения перемещают элемент вдоль положительного направления осей, а отрицательные значения — в противоположном направлении.

scaleZ()

Функция scaleZ() используется для масштабирования элемента в третьем измерении, вдоль оси z . Она принимает в качестве значения число без единиц измерения sz , которое используется для изменения размеров элемента в соответствующем направлении.

Формально, scaleZ() масштабирует элемент вдоль оси z . Но фактически, это выглядит наподобие того, как если бы масштабировалась ( сжималась / растягивалась ) сама ось z , а затем элемент смещался бы вместе с осью после ее масштабирования.

Эффект CSS transform scaleZ более очевиден, когда у вас есть элемент с заданной перспективой, который вращается в трехмерном пространстве или перемещается вдоль оси z .

В первом примере у нас есть два элемента, которые расположены в трехмерном пространстве и перемещаются вдоль оси z с помощью функции translateZ() . Оба перемещаются на одинаковое расстояние. Затем мы масштабируем второй элемент ( правый ), используя scaleZ(2) . На следующем рисунке показан результат применения преобразований, а также разница между этими двумя элементами после масштабирования второго с помощью функции scaleZ .

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

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

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

scale3d()

Функция scale3d() является трехмерным аналогом функции scale() . Она используется для сжатия или растягивания элемента, делая его больше или меньше. Функция принимает в качестве значений три числа без единиц измерения: sx , sy , и sz . Где: sx масштабирует элемент по оси х , sy — по оси у , а sz — по оси z .

Если заданное значение больше 1 , элемент растягивается в соответствующих направлениях и будет выглядеть больше. Если значение равно 1 , то он остается неизменным ( в соответствующих направлениях ). Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допускаются, но они не масштабируют элемент. На самом деле отрицательные значения sx и sy поворачивают элемент по соответствующей оси.

rotate3d()

Функция rotate3d() является трехмерным аналогом функции CSS transform rotate . Она используется для вращения элемента в трехмерном пространстве. Элемент поворачивается на угол, который передается в качестве четвертого параметра. Первые три параметра определяют направление вращения, и вместе они образуют направление вектора [x, y, z] , который используется, чтобы применить вращение в заданном направлении.

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

На следующем рисунке показаны положительные направления вращения ( по часовой стрелке ) по трем осям:

Первые три параметра rotate3d() указывают направление вектора, вдоль которого будет происходить вращение, а угол — указывает направление: по часовой стрелке по вектору или против часовой стрелки.

На следующем рисунке показан результат применения к изображению преобразования rotate3d (1, 1, 1, 50deg); :

rotateX()

Функция rotateX() используется для вращения элемента вокруг оси х в трехмерном пространстве. Это эквивалентно:

где CSS transform rotate3d — это функция преобразования, используемая для вращения элемента в трехмерном пространстве.

Функция принимает в качестве значение угол. Элемент поворачивается на указанное значение вокруг оси х. Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное элемент — против часовой. Направление по часовой стрелке определяется, если смотреть на ось х с конца (где, как правило, размещается стрелка указателя направления) на начало координат.

На следующем рисунке показан результат применения к изображению rotateX(50deg) и rotateX(-50deg) :

rotateY()

Функция rotateY() используется для вращения элемента вокруг оси y в трехмерном пространстве. Это эквивалентно:

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

Функция принимает в качестве значения угол. Элемент поворачивается на указанное значение вокруг оси у . Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное — против часовой стрелки

На следующем рисунке показан результат применения к изображению rotateY(50deg) и rotateY(-50deg) :

rotateZ()

Функция CSS transform rotateZ() используется для вращения элемента вокруг оси z в трехмерном пространстве. Это эквивалентно:

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

Элемент поворачивается на указанное значение вокруг оси z . Если значение положительное, элемент поворачивается по часовой стрелке, если — против часовой стрелки.

Примеры:

На следующем рисунке показан результат применения к изображению rotateZ(50deg) и rotateZ(-50deg) :

matrix3d()

Функция matrix3d() является трехмерным эквивалентом функции matrix() . matrix3d() используется для объединения преобразований в одну матрицу и описания последовательностей трехмерных преобразований в сетке 4 ; 4 .

Например, вместо того, чтобы использовать две ( или более ) функции преобразования в одном объявлении следующим образом:

Можно объединить эти два преобразования в одну матрицу с помощью функции CSS transform matrix3d() :

perspective()

Техническое описание:

Функция perspective() задает матрицу перспективной проекции. Эта матрица масштабирует точки в X и Y , основываясь на их значениях Z , масштабируя точки с положительными значениями Z в направлении от начала координат, а с отрицательными значениями Z — в направлении к началу координат.

Точка на плоскости Z = 0 не изменяются. Значение длины, передаваемое в функцию, определяет расстояние от плоскости Z = 0 до зрителя. Более низкие значения дают более сплюснутую пирамиду и, следовательно, с перспективой эффект становится более выраженным. Например, значение длины 1000 пикселей в перспективе задает небольшие изменения, а значение 200 пикселей — намного большие. Значение глубины должно быть больше 0 , в противном случае функция является недействительной:

Функция CSS transform perspective() используется, чтобы задать глубину элемента, делая элементы, расположенные выше по оси z ( ближе к зрителю ), выглядящими больше, а элементы, расположенные дальше — выглядящими меньше. Чем меньше значение, тем ближе плоскость z к зрителю и тем больше выражен эффект. Чем выше значение, тем дальше от экрана расположен элемент и тем меньше наблюдаются изменения в перспективе.

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

Перспектива может быть применена с помощью функции perspective() или с помощью свойства perspective . Существует большая разница между этими двумя методами. Я лишь отмечу, что функция perspective() применяется к элементу, который трансформируется в 3D-пространстве , в то время как свойство perspective применяется к элементу, дочерние элементы которого в преобразуется в 3D-пространстве .

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

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

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

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

Примечания

Элемент может быть перемещен с помощью свойства CSS position и его связанных свойств. Но лучше перемещать элемент с помощью функции CSS transform translate , потому что она задействует аппаратное ускорение и обеспечивает более высокую производительность. Функция translate3d() также иногда используется, чтобы применить аппаратное ускорение при анимировании элементов в WebKit-браузерах . Это позволяет создать более плавную анимацию.

Примеры

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

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

В этом transform CSS примере к элементу применяется перспектива с помощью функции perspective() :

Можно выполнить то же самое преобразование, но вместо того, чтобы применять к элементу перспективу, можно активировать в контейнере 3D-пространство :

Интерактивная демо-версия

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

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

Ниже приводится таблица поддержки двухмерных CSS-преобразований :

Поддержка 2D-преобразований CSS3

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

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

Ниже приводится таблица поддержки трехмерных преобразований CSS :

Поддержка 3D-преобразований CSS3

Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility для переключения отображения обратной стороны преобразуемого элемента.

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

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

CSS свойство transform

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

В качестве начало координат преобразования при изменении элементов используется свойство transform-origin .

Функция поддерживается большинством браузеров, в некоторых прежних версиях была реализована с префиксом -webkit-.

Синтаксис свойства CSS transform

Здесь – это желаемое действие над элементом, например, rotate (вращение). None – отменяет действие.

Функции transform

Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.

Translate

Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.

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

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

Также есть две функции для смещения элемента только одной оси X или Y.

Scale

Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – scale(x,y) . Если задано одно значение воздействие будет по двум осям сразу.

Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим transform: scale(2) .

На демонстрации элемент с красным фоном увеличился в 2 раза.

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

С помощью них можно зеркально отразить элемент.

• transform: scale(-1, 1) — отразить по горизонтали;
• transform: scale(1, -1) — отразить по вертикали;
• transform: scale(-1, -1) — одновременно перевернуть изображение по горизонтали и вертикали.

Rotate

Разворачивает элемент на плоскости. Например, transform: rotate(45deg) повернет объект на 45% по часовой стрелке.

Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:

deg обозначает градус поворота.

Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.

На примере ниже к синему квадрату применено transform:skew(20deg) (наклон только по горизонтали), а к красному функция transform:skew(20deg, 30deg) (наклон по обоим осям).

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

Matrix

Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.

Например через matrix следующие две функции

будут записаны как:

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

3D функции

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

TranslateZ

TranslateZ сдвигают объект относительно его положения по оси Z на заданное значение. Но эффект от применения будет заметен только при использовании перспективы (perspective) и поворота элемента по осям X или Y.

Также есть общая функция translate3d.

Matrix3d

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

ScaleZ

Масштабирование по оси Z. Но эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, и при смещении по оси Z.

Также есть общая функция scale3d.

Rotate3d.

Определяет вращение в трехмерном пространстве.

Что она делает проще показать на примере. На демонстрации размещено 4 блока с текстом, соответствующим применяемой к элементу функцией. Угол везде использован 50deg.

К первому синему элементу не применяется никакой трансформации. Ко второму элементу применена rotateX , к третьему – rotateX , к четвертому – rotateZ .

Perspective

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

Функции CSS-трансформации

Трансформации к элементу применяются при помощи свойства transform . А значением для этого свойства являются функции трансформации.

Пример

Как это понять

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

Функции трансформации можно условно разбить на несколько групп.

Функции перемещения

translate ( X , Y )

Функция используется для смещения элемента вверх-вниз или влево-вправо. В целом, ту же работу выполняют CSS-свойства top , right , bottom , left — например, для абсолютно ( position : absolute ) или относительно ( position : relative ) спозиционированных элементов. Но есть ряд важных отличий: элемент позиционируется относительно соответствующих сторон родителя. То есть, left : 20px сместит элемент на 20 пикселей относительно левой границы родителя, а translate ( 20px ) смещает элемент вправо относительно того места, где элемент находился до трансформации. В целом, позиционирование и translate прекрасно сочетаются друг с другом. Позиционирование лучше использовать для изначального расположения элемента на странице, а translate применять, если нужно добавить анимации движения.

Функция принимает два параметра: первый параметр отвечает за смещение вправо-влево, а второй параметр — вверх-вниз. Если передать только один параметр, тогда смещение будет только вправо-влево. Мы можем использовать любые единицы измерения расстояния из CSS, например, абсолютные 10px или относительные 50 % . Абсолютное значение используется «как есть»: элемент сместится на 10 пикселей. Относительное значение считается относительно размеров самого элемента. При указании 50 % элемент сместится на половину собственной ширины или высоты.

translateX ( X ) , translateY ( Y ) , translateZ ( Z )

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

translate3d ( X , Y , Z )

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

Похожие публикации:

1. Как сдвинуть блок влево css
2. Как сделать footer html css
3. Как сделать анимированную кнопку css
4. Как сделать блоки друг под другом css