Какие знаешь способы поворота элемента

Да ты посмотри, какие, блядь, варианты! Прямо как в жизни — можно по-разному, но суть одна: крутануть эту хрень нахуй.

Ну, главный, классический способ, без которого нихуя не обойтись — это transform: rotate(). Берёшь свой квадратик и просто, блядь, выкручиваешь ему руки:

.element {
  transform: rotate(45deg); /* вывернул на сорок пять, и всё, пиздец */
}

А если хочешь вращать не от центра, а, допустим, от левого верхнего угла, чтобы всё пошло наперекосяк с нужной точки — юзай transform-origin. Это как сказать: "Вот отсюда, сука, начинай выёбываться".

.element {
  transform-origin: top left; /* точка вращения — верхний левый угол */
  transform: rotate(30deg); /* и поехали нахуй */
}

Современный CSS, ёпта, вообще упростил жизнь. Теперь можно не городить огород с transform, а написать просто rotate. Красота, блядь:

.element {
  rotate: 90deg; /* и всё, ебать, коротко и ясно */
}

Хочешь, чтобы элемент вечно крутился, как мои мысли после пятницы? Пожалуйста, анимация, сука:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } /* полный оборот, пиздец */
}

.element {
  animation: spin 2s linear infinite; /* и пошло-поехало на бесконечном цикле */
}

А если совсем охуеть и уйти в 3D, чтобы вертеть и по X, и по Y, будто в космосе:

.element {
  transform: rotateX(45deg) rotateY(30deg); /* ёбушки-воробушки, объёмный пиздец */
}

И, наконец, для SVG, этих векторных штук, там свой прикол. Атрибут transform прямо в разметке, и можно даже центр вращения указать:

transform="rotate(angle, cx, cy)" — где cx, cy это, блядь, координаты той точки, вокруг которой всё и завертится.

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