🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как повернуть блок на 45 градусов?
Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.
Пример использования
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
Основной синтаксис
Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).
transform: rotate(угол);
Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
Свойство transform
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.
Использование в реальных проектах
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.
👉 @frontendInterview