OlDesign
@OlDesign
Студия веб-разработки и продвижения

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

Идея такая:

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

Как сделать так чтобы нажимая на одну из кнопок - полностью "повернулся" весь сайт, включая и сами кнопки.
Но чтобы позиционирование текста оставалось читабельным, то есть как обычно.
  • Вопрос задан
  • 287 просмотров
Пригласить эксперта
Ответы на вопрос 2
@kirill-93
Через CSS transform.
Например для поворота на 90% что-нибудь такое:
/*Общий контейнер со всем содержимым*/
.container {
    transform: rotate(90deg);
}

/*Тексты кнопок*/
.text {
    transform: rotate(-90deg);
}
Ответ написан
KickeRocK
@KickeRocK
По клику присваиваете контейнеру ваших кнопок какой-то класс(к примеру rotate), прописываете стили для элементов под этим классом.
Так
Тут стили применяются ко всем детям .rotate
Можно и через js,без доп.стилей, там нужно перебрать все элементы и поменять им стили.
Но чтобы позиционирование текста оставалось читабельным, то есть как обычно.

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

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы