Преобразование 3D CSS не вращается вокруг правильной оси

Я пытаюсь построить сайт с четырьмя страницами на лицах куба. Я довольно близок к тому, что было после здесь , но 3D-вращения иногда ведут себя не так, как ожидалось.

Когда щелкнут элемент nav, поворот y на правильную грань устанавливается вместе со случайным +/- 360 вокруг осей x и z для эффекта холодного перехода. Проблема в том, что, когда куб поворачивается на 90 или 270 градусов (щелкая мышью или контактом), дальнейшие повороты z не работают. На самом деле, я уверен, что в этом состоянии (повернутом на 90 или 270 град.) Вокруг оси x применяются свойства rotateX и rotateZ, потому что иногда, когда мысли, щелчки мыслей снова заставляют куб вращаться дважды вокруг x или совсем нет, хотя каждый клик должен только увеличивать/уменьшать углы x или z на 360 градусов. Чтобы это увидеть, нажмите «мысли» несколько раз, чтобы увидеть, что стили rotateX #cube и стили rotateY корректно обновляются в Инструментах разработчика, в то время как куб вращается только вокруг оси x. Я наблюдал это как в Chrome, так и в Firefox.

Вот код, который я использую, чтобы повернуть куб на навигационные клики:

    function performNavigation(pageName){
        //generate random spins for x and z
        if(Math.random() > .5){
            zAngle += 360;
        } else {
            zAngle += -360;
        }
        if(Math.random() > .5){
            xAngle += 360;
        } else {
            xAngle += -360;
        }
        //navToDegreesMap is an array that stores the correct rotation angle for each face of the cube
        yAngle = -navToDegreesMap[pageName];
        rotateCube(xAngle,yAngle,zAngle);
    }

    function rotateCube(xAngle, yAngle, zAngle){
        //prop is the transform property with appropriate vendor prefix
        document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg) rotateZ("+zAngle+"deg)";
    }

Источник здесь .

Спасибо за помощь!

0
nl ja de
См. Попытку № 1 в моем вопросе здесь: CSS cube с помощью клавиатуры"> stackoverflow.com/ questions/20614162/& hellip; Он решает вашу проблему, но она все еще не идеальна
добавлено автор Teo Dragovic, источник
Вы проверили это демо? desandro.github.com/3dtransforms/docs/cube.html
добавлено автор charliemagee, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)