Возможно ли повернуть только контент?

Question

[Владимир Сингхтлов]

Нужно разделить экран на 4 части квадратами, разделить получилось, но нужно еще повернуть так чтобы верх блока был направлен в центр экрана. Будут сидеть 4 человека за столом и взаимодействовать с экраном в своей области.
Размеры экрана не известны, посчитал javascript'ом выставил абсолютно. Как поверутнуть контет.....

Comments

[Сергей delphinpro]

хоть бы картинку прилепили

[Руслан Галиев]

А в чем проблема повернуть и спозиционировать каждый DIV с контентом?

[Владимир Сингхтлов]

Руслан Галиев: ну попробуй, вроде просто, а на деле...

[Максим Тимофеев]

вааще не понятно, что Вы имеете в виду. Давайте картинку, давайте что получилось. Хоть что-то.

[Владимир Сингхтлов]

У каждого своя рабочая область, она резиновая.
Центральный верхний блок:

top: 0px; right: 308.418px; bottom: 274px; left: 308.418px;

// объект с местами за столом
seats: [
                    {
                        rotate: 180,
                        top: {type: 'none', value: 0},
                        right: {type: 'horizontal', value: 0},
                        bottom: {type: '-vertical', value: 0},
                        left: {type: 'horizontal', value: 0}
                    },
                    {
                        rotate: -90,
                        top: {type: 'none', value: 0},
                        right: {type: 'none', value: 0},
                        bottom: {type: 'none', value: 0},
                        left: {type: '-horizontal', value: 0}
                    },
                    {
                        rotate: 0,
                        top: {type: '-vertical', value: 0},
                        right: {type: 'horizontal', value: 0},
                        bottom: {type: 'none', value: 0},
                        left: {type: 'horizontal', value: 0}
                    },
                    {
                        rotate: 90,
                        top: {type: 'none', value: 0},
                        right: {type: '-horizontal', value: 0},
                        bottom: {type: 'none', value: 0},
                        left: {type: 'none', value: 0}
                    },
                ],

//метод просчета для блоков:
resize: function (event) {
                this.$store.commit('sizetable');

                var width = this.$store.state.width,
                    height = this.$store.state.height,
                    hypotenuse,
                    indentation,
                    angle,
                    vertical,
                    horizontal,


                hypotenuse = Math.sqrt(Math.pow(this.$store.state.width, 2) + +Math.pow(this.$store.state.height, 2));
                angle = height / width;
                indentation = hypotenuse / 4;

                vertical = indentation * Math.sin((this.toDegrees(angle) * Math.PI / 180.0));
                horizontal = indentation * Math.sin(Math.sin((90 - this.toDegrees(angle)) * Math.PI / 180.0));

                console.log(horizontal, vertical);
                let self = this;

                $.each(this.seats, function (i, j) {
                    var s = i
                    $.each(j, function (k, n) {

                        switch (n.type) {
                            case 'vertical':
                                self.seats[s][k]['value'] = vertical;
                                break;
                            case 'horizontal':
                                self.seats[s][k]['value'] = horizontal;
                                break;
                            case '-vertical':
                                self.seats[s][k]['value'] = height/2;
                                break;
                            case '-horizontal':
                                self.seats[s][k]['value'] = width - horizontal;
                                break;
                        }
                    })
                });
            },

[Сергей Томинов]

Что-то типа такого Вам нужно?

[Владимир Сингхтлов]

Сергей Томинов: нет, вот на картинке, которую разместил, блоки стоят правильно, контент не правильно расположен, за каждой из 4 сторон сидит человек и читает свой текст

[Владимир Сингхтлов]

Максим Тимофеев: там может быть не текст, а любой блок, например компонент с меню

[Максим Тимофеев]

Владимир Сингхтлов: Почему за Вас кто-то рисует и догадывается. Дайте свой эскиз и вопрос будет закрыт.

[Владимир Сингхтлов]

Максим Тимофеев: Выше уже есть изображение, если не увидели продублирую

[Сергей Томинов]

Владимир Сингхтлов: Поправил https://jsfiddle.net/2jp7qz9j/

[Владимир Сингхтлов]

Сергей Томинов: Хорошо, растяните блок с контентом внутри родительского бокового блока.

[Сергей delphinpro]

Владимир Сингхтлов: https://jsfiddle.net/c6yd7zme/

Answer 1

[Максим Тимофеев]

Годится?
https://codepen.io/wokster/pen/eEjJyK

Comments

[Владимир Сингхтлов]

не все так просто

[Максим Тимофеев]

Владимир Сингхтлов: А детальнее можно? Я не поленился Вам пример зафигячить, а Вы мне жалеете слова в ответе.

[Владимир Сингхтлов]

Максим Тимофеев: такой пример я уже делал, суть в том, что не контент при rotate поворачивает, а блок и он не квадратный)

[Владимир Сингхтлов]

Максим Тимофеев: Спасибо за пример, мне не жалко, хорошо давайте вставим во все блоки компонент, в котором будет меню кафе с колонками и его нужно будет прокручивать, каждому человеку на своей стороне.

[Владимир Сингхтлов]

Максим Тимофеев: Как минимум будет вылазить блок и не будет видно частично контента

[Максим Тимофеев]

Владимир Сингхтлов: Смотрю на ваш пример-эскиз и не вижу, что там квадратное и что повернуто

[Максим Тимофеев]

Как минимум будет вылазить блок и не будет видно частично контента

не должно если сбросить paddding