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

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

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

А также:

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

Функция transform: rotate

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

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

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

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

Синтаксис

селектор { transform: rotate(угол: deg | rad | grad | turn); }

Значения

Значение Описание

Угол	Угол в любом допустимом в CSS формате.

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

Примеры

Пример

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

#elem { -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); border: 1px solid black; width: 100px; height: 50px; }

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

Пример

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

#elem { -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); border: 1px solid black; width: 100px; height: 50px; }

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

Пример

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

#elem { border: 3px solid black; width: 100px; height: 50px; -o-transition: transform 3s linear; -ms-transition: transform 3s linear; -moz-transition: transform 3s linear; -webkit-transition: transform 3s linear; transition: transform 3s linear; } #elem:hover { -o-transform: rotate(1turn); -ms-transform: rotate(1turn); -moz-transform: rotate(1turn); -webkit-transform: rotate(1turn); transform: rotate(1turn); }

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

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

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

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

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

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

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

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

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

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

.rotatable{ -webkit-transform: rotate(-45deg); //Chrome, Safari -moz-transform: rotate(-45deg); //Firefox -o-transform: rotate(-45deg); //Opera -ms-transform: rotate(-45deg); //IE transform: rotate(-45deg); //браузеры без префексов }

Этот код будет осуществлять поворот текста 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)

Функция Описание

none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y)	Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n)	Сдвигает элемент относительно его обычного положения по оси X.
translateY(n)	Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n)	Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n)	Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол)	Деформирует стороны элемента относительно оси X.
skewY(угол)	Деформирует стороны элемента относительно оси Y.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

div { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

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

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

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

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

transform-origin

Значения:
ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %)	Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

div { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 20% 40%; -ms-transform-origin: 20% 40%; transform-origin: 20% 40%; }

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