Как div повернуть на 45 градусов?

Поворот div на 45 градусов: CSS Transform

Для поворота элемента <div> на 45 градусов используется CSS свойство transform с функцией rotate(). Это один из наиболее распространённых приёмов трансформации элементов в современном веб-дизайне.

Базовый способ: transform rotate

/* Поворот на 45 градусов */
div {
  transform: rotate(45deg);
}

Это самый простой и эффективный способ. Элемент будет повёрнут на 45 градусов вокруг своего центра.

С указанием центра поворота

По умолчанию поворот происходит вокруг центра элемента (50% 50%). Но можно изменить точку поворота с помощью transform-origin:

div {
  width: 100px;
  height: 100px;
  background: blue;
  transform: rotate(45deg);
  /* Поворот вокруг верхнего левого угла */
  transform-origin: 0 0;
}

Значения transform-origin:

• center (по умолчанию) — центр элемента
• top left — верхний левый угол
• 50% 50% — центр в процентах
• 0 0 — координаты в пикселях

Примеры с transform-origin

/* Поворот вокруг центра (по умолчанию) */
.rotate-center {
  transform: rotate(45deg);
  transform-origin: center center;
}

/* Поворот вокруг верхнего левого угла */
.rotate-top-left {
  transform: rotate(45deg);
  transform-origin: top left;
}

/* Поворот вокруг конкретной точки */
.rotate-custom {
  transform: rotate(45deg);
  transform-origin: 20px 30px;
}

Комбинированные трансформации

transform может включать несколько операций одновременно:

div {
  /* Поворот и масштабирование */
  transform: rotate(45deg) scale(1.2);
  
  /* Поворот, сдвиг и масштабирование */
  transform: rotate(45deg) translateX(20px) scale(0.8);
  
  /* Трёхмерный поворот */
  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}

Плавный переход с transition

Для анимированного поворота добавляем transition:

div {
  width: 100px;
  height: 100px;
  background: tomato;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

div:hover {
  transform: rotate(45deg);
}

Пример в React/TypeScript

import { useState } from 'react';
import './RotatingDiv.css';

export function RotatingDiv() {
  const [isRotated, setIsRotated] = useState(false);

  return (
    <div
      className={`rotating-element ${isRotated ? 'rotated' : ''}`}
      onClick={() => setIsRotated(!isRotated)}
    >
      Нажми на меня
    </div>
  );
}

/* RotatingDiv.css */
.rotating-element {
  width: 100px;
  height: 100px;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.rotating-element.rotated {
  transform: rotate(45deg);
}

Производительность и best practices

Используй will-change для оптимизации:

div {
  transform: rotate(45deg);
  will-change: transform; /* Подсказка браузеру оптимизировать */
}

Избегай:

• Трансформации через left, top, width, height — это медленно
• Использование transform для layout-ов — используй Flexbox или Grid

Почему transform хорош:

• Работает в отдельном слое (GPU ускорение)
• Не вызывает перерассчитывания layout
• Плавные анимации без jerks

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

transform: rotate() поддерживается всеми современными браузерами, включая:

• Chrome, Firefox, Safari, Edge
• Мобильные браузеры (iOS Safari, Chrome Mobile)

Для старых браузеров (IE8 и ниже) используй фильтры, но это уже не актуально.

Альтернативный способ: CSS Grid/Flexbox

Если тебе нужна только визуальная ротация для UI-элемента, можешь использовать CSS переменные:

div {
  --rotation: 45deg;
  transform: rotate(var(--rotation));
}

Таким образом, transform: rotate(45deg) — это универсальное, производительное решение для поворота элементов в веб-разработке.