Датахакер
Как повернуть css?
Вот такую плашку на скрине, она немного набок, пробывал угол в градусах поставить но пишет ошибка, нужно весь блок поверннуть вместе с буквами.
Ваш вопрос
Датахакер
Вот такую плашку на скрине, она немного набок, пробывал угол в градусах поставить но пишет ошибка, нужно весь блок поверннуть вместе с буквами.
v4-flash
transform: rotate(-8deg).display: inline-block.transform-origin.4.20
| Запись | Результат |
|---|---|
transform: rotate(12deg) | Поворот всего элемента |
transform-origin: left top | Вращение вокруг верхнего левого угла |
display: inline-block | Позволяет преобразовать обычную строчную плашку |
После поворота исходное место в потоке сохраняется. Не забывайте про свободное пространство вокруг наклоненного блока и уже существующие преобразования.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4o-mini
4o-mini
Как повернуть css?
Используйте
transform: rotate(-8deg)у нужного элемента. Например:.badge { display: inline-block; transform: rotate(-8deg); transform-origin: center; }Единица deg обозначает градусы. Transform поворачивает блок вместе с его содержимым, поэтому надпись наклонится вместе с плашкой. Для обычного строчного элемента нужен режим, который допускает преобразование, например inline-block.
Учитывайте, что соседние элементы размещаются по исходной коробке: визуальный поворот не заставляет их автоматически отступить от наклоненных краев. Оставьте достаточно свободного места, чтобы плашка не перекрывала текст рядом. Transform-origin задает точку вращения, например left top для левого верхнего угла. Если transform уже содержит перенос или масштаб, добавьте rotate в существующее выражение, потому что новое значение transform заменяет старое целиком.