Как повернуть сайт на 90 или 270 градусов?

Question

[Oldesign]

Идея такая:

На сайте есть картинка и несколько квадратных кнопок поверх нее.
Кнопки сделаны вверху, внизу, справа, слева, и ещё 4 по второстепенным сторонам, все они разного цвета.

Как сделать так чтобы нажимая на одну из кнопок - полностью "повернулся" весь сайт, включая и сами кнопки.
Но чтобы позиционирование текста оставалось читабельным, то есть как обычно.

Answer 1

[WebDev]

Через CSS transform.
Например для поворота на 90% что-нибудь такое:

/*Общий контейнер со всем содержимым*/
.container {
    transform: rotate(90deg);
}

/*Тексты кнопок*/
.text {
    transform: rotate(-90deg);
}

Answer 2

[Andrew]

По клику присваиваете контейнеру ваших кнопок какой-то класс(к примеру rotate), прописываете стили для элементов под этим классом.
Так
Тут стили применяются ко всем детям .rotate
Можно и через js,без доп.стилей, там нужно перебрать все элементы и поменять им стили.

Но чтобы позиционирование текста оставалось читабельным, то есть как обычно.

хмм. Если не нужно вертеть текст - то просто поменяйте местами ширину и высоту js-ом у всех кнопок