Transform rotate css примеры

Как работает transform в CSS на примерах

CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение.

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

Свойство transform может принимать следующие значения:

• none — никакого преобразования не применяется.
• rotate(angle) — вращает элемент на заданный угол.
• scale(x,y) — масштабирует элемент по осям X и Y.
• translate(x,y) — перемещает элемент на заданные координаты.
• skew(x-angle,y-angle) — наклоняет элемент на заданные углы по осям X и Y.

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

Примеры использования

Вращение элемента — rotate

Свойство rotate вращает элемент вокруг его центра.

В этом примере элемент повернётся на 20 градусов по часовой стрелке (оси вы не увидите).

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

Свойство scale изменяет размер элемента.

Обратите внимание, при масштабировании изменяются все параметры элемента — например, рамка становится в полтора раза толще.

Перемещение элемента — translate

Свойство translate позволяет вам перемещать элемент по экрану.

Наклон элемента — skew

Свойство skew позволяет вам наклонять элемент по осям X и Y — как если бы вы нажимали на его углы.

Анимация превращений

Логично, что такую красоту используют для анимаций. transform легко анимируется с помощью свойства transition или ключевых кадров ( @keyframes ).

Анимация с помощью transition

Свойство transition позволяет анимировать плавное изменение свойств CSS от одного состояния к другому за определённое время. Вот пример анимации сдвига элемента при наведении курсора.

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

Анимация с помощью @keyframes

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

@keyframes example < 0% < transform: scale(1); >50% < transform: scale(1.2); >70% < transform: rotate(30deg); >100% < transform: skew(20deg, 10deg);>> div

Выходит, с помощью transform вы можете вращать, масштабировать, перемещать и наклонять элементы, а также применять более сложные преобразования с помощью матриц. Свойство transition помогает анимировать эти эффекты. Главное — не переборщить.

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

Например, если вы захотите расставить элементы на странице с помощью translate , то лучше не надо. Для этого лучше использовать другие CSS свойства, такие как flexbox или grid .

• CSS свойство transform позволяет применять 2D и 3D преобразования к элементам.
• С помощью transform можно вращать, масштабировать, перемещать и наклонять элементы.
• Не все CSS свойства могут быть преобразованы с помощью transform .
• Вместе с transition получаются неплохие анимации. Главное — знать меру.

Материалы по теме

• Плавные трансформации на чистом CSS — свойство transition
• Состояния элементов, чтобы анимировать не только при наведении курсора
• Как анимация портит ваши сайты — помните, что иногда анимаций бывает слишком много

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Свойство CSS transform

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

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

transform: трансформация1 [трансформация2];
 

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

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

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

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

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

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

html> head> style> .kvadrat1< // без вращения width:100px; height:100px; background:#444; margin:30px; > .kvadrat1_rotate20deg< // с вращением на 20 градусов width:100px; height:100px; background:#444; margin:30px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); > /style> /head> body> div class css">kvadrat1">/div> div class css">kvadrat1_rotate20deg">/div> /body> /html>

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

-ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg);

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

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

html> head> style> .kvadrat2< // без вращения width:100px; height:100px; background:#444; margin:30px; > .kvadrat2:hover< // вращение при наведении width:100px; height:100px; background:#888; margin:30px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); > /style> /head> body> div class css">kvadrat2">/div> /body> /html>

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

Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

html> head> style> .kvadrat3< // без вращения width:100px; height:100px; background:#444; margin:30px; transition: all 1s linear; // сглаживание -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; > .kvadrat3:hover< // вращение при наведении width:100px; height:100px; background:#888; margin:30px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; > /style> /head> body> div class css">kvadrat3">/div> /body> /html>

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

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

3. transform:translate(x,y) — смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках — смещение по оси Х и У соответственно.

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

html> head> style> .kvadrat4< width:100px; height:100px; background:#444; margin:30px; > .kvadrat4:hover< width:100px; height:100px; background:#444; margin:30px; -ms-transform: translate(15px,40px); -webkit-transform: translate(15px,40px); -o-transform: translate(15px,40px); -moz-transform: translate(15px,40px); transform: translate(15px,40px); > /style> /head> body> div class css">kvadrat4">/div> /body> /html>

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

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

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) — смещение по Х, translateY(y) — смещение У.

4. transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

html> head> style> .kvadrat5< width:100px; height:100px; background:#444; margin:30px; > .kvadrat5:hover< width:100px; height:100px; background:#444; margin:30px; -ms-transform: scale(1.5,1.3); -webkit-transform: scale(1.5,1.3); -o-transform: scale(1.5,1.3); -moz-transform: scale(1.5,1.3); transform: scale(1.5,1.3); > /style> /head> body> div class css">kvadrat5">/div> /body> /html>

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

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

5. transform:skew — наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках — наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

html> head> style> .kvadrat6< width:100px; height:100px; background:#444; margin:30px; > .kvadrat6:hover< width:100px; height:100px; background:#444; margin:30px; -ms-transform: skew(20deg,10deg); -webkit-transform: skew(20deg,10deg); -o-transform: skew(20deg,10deg); -moz-transform: skew(20deg,10deg); transform: skew(20deg,10deg); > /style> /head> body> div class css">kvadrat6">/div> /body> /html>

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

При наведении квадрат трансформируется в ромб благодаря наклону.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) — наклон по Х, skewY(y) — наклон по У.

6. Комбинирование значений transform

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

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

html> head> style> .combo< width: 100px; height: 100px; background: #444; margin: 30px; border: 5px solid #222; transition: all 2s ease-in; -webkit-transition: all 2s ease-in; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; > .combo:hover< width:100px; height:100px; background: #A3423B; border-radius: 50px; border: 5px solid #F00; -ms-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px); -webkit-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px); -o-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px); -moz-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px); transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px); margin: 30px; transition: all 2s ease-in; -webkit-transition: all 2s ease-in; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; > /style> /head> body> div class css">combo">/div> /body> /html>

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

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

• none — отсутствие преобразований (по умолчанию включено оно);
• matrix(x,x,x,x,x,x) — преобразование 2D с помощью матрицы из 6 значений;
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) — преобразование 3D с помощью матрицы из 16 значений;
• translate3d(x,y,z) — перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
• scale3d(x,y,z) — масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
• rotate3d(x,y,z) — вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
• rotateX(x) — 3d вращение по оси X;
• rotateY(x) — 3d вращение по оси Y;
• rotateZ(x) — 3d вращение по оси Z;
• perspective(n) — перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация" [window.]document.getElementById("elementID").style.transform = ""

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

Источник