rotate() в CSS

CSS transform Свойство

Пример

Поворот, наклон и масштабирование трех различных элементов

div.b <
transform: skewY(20deg);
>

div.c <
transform: scaleY(1.5);
>

Определение и использование

Свойство transform применяет 2D или 3D преобразование к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклона и т.д., элементы.

Чтобы лучше понять свойство Transform, Просмотрите демонстрацию.

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

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

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

Синтаксис

Значения свойств

Другие примеры

В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков.

Функция rotate()

Функция rotate() свойства transform позволяет вращать элемент в 2D-пространстве. В скобках задается угол от 0 до 360 градусов. К числу дописывается приставка deg . Пример:

Если указано положительное число, поворот происходит по часовой стрелке, если отрицательное — против часовой. Если установлено значение 0deg , элемент останется в исходном положении. 360deg означает, что элемент совершит один полный оборот по часовой стрелке, 1080deg — три полных оборота, -720deg — два полных оборота против часовой стрелки и т. д.

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

А пока несколько примеров статичных элементов, трансформированных с использованием функции вращения rotate() :

Функции для каждой оси

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

• rotateX() — поворот элемента по оси X;
• rotateY() — поворот по оси Y;
• rotateZ() — поворот элемента по оси Z.

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

Изначально поворот элемента происходит относительно его центральной оси. Но центр вращения можно изменить, воспользовавшись свойством transform-origin . В качестве значения указываются координаты для трех осей — X, Y и Z.

Единицы измерения для X и Y могут быть любыми. Также принимаются ключевые слова left , center , right (для X) и top , center , bottom (для Y). Для оси Z позволительно использовать корректные единицы измерения длины, кроме процентов.

По умолчанию настройки transform-origin следующие:

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

CSS перемещение, вращение, 3D

Здравствуйте уважаемые начинающие веб-мастера.

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

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

За основу возьмём блок

CSS:
.div <
width : 150px ;
height : 100px ;
border : 2px solid #333 ;
border-radius : 5px ;
background : #463E48 ;
>

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

Уменьшение — увеличение

а) transform : scale(0.5) ; — масштабирует элемент по горизонтали и вертикали. Число больше единицы увеличивает; элемент, а меньше единицы — уменьшает.

б) transform : scaleX(0.5) ; — масштабирует элемент по горизонтали;

в) transform : scaleY(0.5) ; — масштабирует элемент по вертикали;

Наклоны

а) transform : skewX(30deg) ; — наклоняет элемент на заданный угол по вертикали (в данном случае на 30°). Отрцательное значение наклоняет элемент в другую сторону;

б) transform : skewY(30deg) ; — наклоняет элемент на заданный угол по горизонтали;

Перемещение

а) transform : translate(50px) ; — сдвигает элемент на заданное значение по горизонтали и вертикали;

б) transform : translateX(50px) ; — сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.

в) transform : translateY(50px) ; — сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное значение вверх;

Вращение

а) transform : rotate(45deg) ; — поворот элемента вокруг центра (по умолчанию) на заданный угол;

б) transform : rotateY(360deg) ; — поворот элемента вокруг вертикальной оси. Применяется в 3D и об этом ниже;

в) transform : rotateX(360deg) ; — поворот элемента вокруг горизонтальной оси. Применяется в 3D;

Отражение

transform : matrix() ; — создаёт эффект отражения элемента.

Для эффекта отражения в

div > img src =» images/makak.jpg » alt =»»> br >
img src =» images/makak.jpg » alt =»» class =» reflect «>
/div >

.reflect <
transform : matrix(1, 0, 0, -1, 0, 0) ;
opacity : 0.5 ;
>

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

transform-style : preserve-3d; — создаёт 3D эффект.

Точка координат

transform-origin : x y z; — задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент.

В плоскости используются два значения (x y), в 3D три значения (x y z)

Вот примерно так всё и делается.

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

Например: элемент будет постепенно наклоняться в течении анимации

CSS transform Property

Example

Rotate, skew, and scale three different

div.b <
transform: skewY(20deg);
>

div.c <
transform: scaleY(1.5);
>

Definition and Usage

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

To better understand the transform property, view a demo.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Syntax

Property Values

More Examples

Images thrown on the table
This example demonstrates how to create «polaroid» pictures and rotate the pictures.

cssprofi.ruАлексей Елизаров. Уроки CSS, HTML и не только

Автор: Алексей Елизаров.

В этом уроке я покажу как использовать анимацию CSS для вращения объекта на 360 градусов. (transform:rotate (360deg)). Нажав просмотр Вы увидите что планета вращается вокруг своей оси.

Начнем. Я создал простую страницу HTML 5 для примера. Кстати, меню тоже создано с использованием HTML 5.

Структура html

Сначала идет контейнер div (earth) — это и есть объект нашего урока (анимация CSS). Следующий блок div это логотип. И последним идет блок меню HTML 5 с тегом .

Код CSS

Давайте разберем вот этот отрывок кода:

Собственно здесь и прописана вся анимация CSS. Сначала указано свойство transform: rotate(360deg);. Затем имя (earth), продолжительность в секундах (77s) и параметры которые отвечают за повторение, паузу вначале и т.д. После указываются описание ключевых кадров анимации CSS от 0 до 100%.

CSS rotate() Function

The CSS rotate() function is used to rotate elements in a two-dimensional space.

Degrees

There are 360 degrees in a full circle. The unit identifier for degrees is deg .

Here’s an example of using degrees with the rotate() function:

Gradians

There are 400 gradians in a full circle. The unit identifier for gradians is grad .

Gradians are also known as «gons» or «grades» (although these aren’t valid unit identifiers — you should still use grad as the unit identifier).

Here’s an example of using gradians:

Radians

There are 2Ï€ radians in a full circle. The unit identifier for radians is rad .

Here’s an example of using radians:

Turns

There is 1 turn in a full circle. The unit identifier for turns is turn .

Here’s an example of using turns:

Negative Values

You can also use negative values for the angle. A negative value will rotate the element in a counter-clockwise direction.

Adding transform-origin

The default origin for the rotation is 50% 50% . You can use transform-origin to adjust the origin of the transformation:

Official Syntax

The official syntax of the rotate() function is as follows:

Possible Values

The rotate() function accepts any val >angle value that defines the angle for the rotation. This angle can be represented with any of the following units:

Degrees. There are 360 degrees in a full circle. Gradians, also known as «gons» or «grades» (although these aren’t valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle. Radians. There are 2Ï€ radians in a full circle. Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both rotate(0deg) and rotate(0) are valid (but rotate(45) is not).

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

Стажировка HTML5

Дмитрий Мещеряков

2D трансформации

Свойство transform

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

• поддержка трансформаций: IE9+;
• нужны вендорные префиксы для IE9, Safari 8-, Android;
• значение по умолчанию: transform: none;

Допустимые функции трансформации:

• перемещение элемента: translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %;
• масштабирование элемента: scale(), scaleX(), scaleY() — любое число;
• вращение элемента: rotate() — угол (deg, grad, rad или turn);
• искажение элемента: skew(), skewX(), skewY() — угол (deg, grad, rad).

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

Свойство transform: translate();

Перемещает элемент относительно его текущего местоположения.

Примеры

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

Центрирование при помощи transform: translate()

При помощи свойства transform: translate(); можно отцентрировать элемент по горизонтали, по вертикали или одновременно по горизонтали и по вертикали.

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

Свойство transform: scale();

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

Примеры

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

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

Свойство transform: rotate();

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

Примеры

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

Поворот на 360 градусов

Поворот на 720 градусов

Искажение элемента

Свойство transform: skew();

Используется для искажения сторон элемента относительно координатных осей.

Примеры

Искажение элемента

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

Свойство transform-origin;

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

В качестве значений могут использоваться любые единицы измерения длины (px, em, rem, %, ключевые слова top, bottom, left, right).

Примеры

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

Искажение элемента без искажения текста

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

See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

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

Способ 1. Значения через пробел

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

Способ 2. Значения через функцию matrix()

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

Матрица преобразований имеет размер 3х3 и в общем виде записывается так:

Мы можем записать это при помощи ключевого слова matrix в свойстве transform:

Буквы от a до f — числа, определяемые типом трансформации. Матрицы — это рецепты тех видов трансформации, которые мы хотим применить.

Когда мы применяем двумерную трансформацию, браузер умножает матрицу на вектор [x, y, 1]. Значения X и Y — координаты конкретной точки блока, к которому применяется трансформация.

Функция matrix()

Чтобы найти координаты после трансформации, мы умножаем каждый элемент каждой строки матрицы на соответствующую ему строку вектора. Затем складываем произведения:

Функция matrix()

У каждого типа трансформаций — своя собственная матрица. Например, так выглядит матрица для трансформации сдвига:

Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Этот вектор служит аргументом для функции matrix():

Функция matrix()

Так выглядят матрицы преобразований для разных видов трансформации:

Функция matrix()

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

Пример составной трансформации при помощи функции matrix()

Пример составной трансформации при помощи функции matrix()

See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

Новый контекст наложения

Блок, к которому применяется transform , создает новый контекст наложения, ведет себя так, как если к нему применить position: relative . Поэтому дочерние элементы с position: absolute будут позиционироваться относительно этого родительского элемента с трансформацией.

Фиксированные ( position: fixed ) элементы внутри блока, к которому применяется transform, будут вести себя как элементы с position: absolute. Т.е. они будут позиционироваться относительно родитеского элемента с трансформацией, их можно «проскроллить», будто они не фиксированные.

3D трансформации

3D трансформации создают объемные реалистичные эффекты на веб-страницах.

3D трансформации работают аналогично с 2D трансформациями с разницей в том, что элементы могут перемещаться вдоль оси Z, вглубь экрана и из него.

• поддержка 3D трансформаций: IE10+;
• для активации 3D пространства нужно установить свойство perspective для родительского контейнера;
• допустимые 3D трансформации: translate(), scale(), rotate(), matrix().

Установка 3D-перспективы

Свойство perspective (задает глубину просмотра, т.е. расстояние по оси Z между z=0 и пользователем)

Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform. 0 (как и none) означает отсутствие перспективы.

Задание точки трансформации

Свойство perspective-origin (аналогично transform-origin)

Стиль 3D-преобразований

Свойство transform-style (не поддерживается во всех IE)

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

• flat — значение по умолчанию. Все дочерние элементы отображаются плоскими в двухмерной плоскости блока-контейнера;
• preserve-3d — располагает элементы в трехмерном пространстве.

Стиль 3D-преобразований

See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

transform css

transform: scale(2, 2);

transform: skew(-30deg, -20deg);

transform: translate(40px, -40px);

Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я. БЕССМЕРТНЫЙ ПОНИ!

16 комментариев:

NMitra Про запятые думаю понятно — задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью. NMitra Посмотрите эту статью http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей — это китайская грамота. Космо Мизраил Горыныч Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span <. >
div -> span работает, а вот
div -> p -> span — не работает.

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

Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика
также знак

используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title

Вращаем объект на CSS3 (transform:rotate)

Сейчас уже сложно представить сайт без какой нибудь легкой анимации, так например, плавное исчезновение картинок вместо резкой подмены, так и подчеркивание ссылок, сменяя какой либо обобьет или вращая,конечно вращать можно было и раньше с помощью JS но теперь это можно делать при помощи css3 (transform:rotate), для старых версий IE от 8 и ниже ничего не будет видно, так как он древний, и не поддерживает css3

CSS код анимации:

и тип анимации (что делаем собственно) вращаем на 90 градусов весь тег ссылки:

Но можно не только вращать но и искажать но IE8 и ниже такого уже точно не смогут, без скриптов

Вращать относительно другой оси

1 комментарий для записи Вращаем объект на CSS3 (transform:rotate)

У меня в опере не работает, хотя и так понятно, что должно в итоге получится

cssprofi.ruАлексей Елизаров. Уроки CSS, HTML и не только

Автор: Алексей Елизаров.

В этом уроке я покажу как использовать анимацию CSS для вращения объекта на 360 градусов. (transform:rotate (360deg)). Нажав просмотр Вы увидите что планета вращается вокруг своей оси.

Начнем. Я создал простую страницу HTML 5 для примера. Кстати, меню тоже создано с использованием HTML 5.

Структура html

Сначала идет контейнер div (earth) — это и есть объект нашего урока (анимация CSS). Следующий блок div это логотип. И последним идет блок меню HTML 5 с тегом .

Код CSS

Давайте разберем вот этот отрывок кода:

Собственно здесь и прописана вся анимация CSS. Сначала указано свойство transform: rotate(360deg);. Затем имя (earth), продолжительность в секундах (77s) и параметры которые отвечают за повторение, паузу вначале и т.д. После указываются описание ключевых кадров анимации CSS от 0 до 100%.