Сегодня мы создадим 3D куб на html и css, а также заставим его крутиться при помощи кода на JavaScript.
Создадим три файла: index.html, style.css и main.js
В файле index.html создадим разметку:
Подключим файл стилей style.css и подключим файл main.js.
Теперь создадим блок div с классом "app", а внутри него создадим div с классом "cube".
Внутри блока с классом "cube" создадим шесть блоков div каждый блок будет одной из сторон нашего куба. Всем блокам назначим класс "CubeSide", а также назначим каждому из блоков индивидуальный класс.
Первому блоку назначим дополнительный класс "side-one", второму блоку назначим класс "side-two", третьему назначим класс "side-three", четвертому назначим класс "side-four", соответственно пятому блоку назначим класс "side-five" и шестому блоку назначим класс "side-six".
Ещё создадим точки на нашем кубе.
В блоке с классом "side-one" создадим "span" с классами "dot" и "dot_one", в блоку с классом "side-two" создадим два элемента "span", первому элементу "span" зададим классы "dot" и "dot_one", а второму зададим классы "dot" и "dot_two". поступаем точно также и с оставшимися четырьмя блоками и каждый раз добавляем "span".
Теперь перейдем к файлу style.css
Всем элементам назначим свойство "border-sizing: border-box", блок с классом "app" позиционируем абсолютно, ширину и высоту зададим в 40 пикселей, отступ слева и сверху в 50% и расположим блок по центру при помощи свойства "transform: translate(-50%, -50%)", а свойство "perspective" установим в 1500 пикселей.
Блоку с классом "cube" назначим ширину и высоту в 40 пикселей, а свойство "transform-style" установим в "preserve-3d"
Блок с классом "cube" позиционируем абсолютно, ширину и высоту устанавливаем в 40 пикселей, назначим "border" в 1 пиксель с цветом "333333", а фону установим цвет "121212"
Расположим правильно стороны куба.
Блок с классом "side-one" сдвинем по оси Z на 20 пикселей при помощи свойства "transform: translateZ". Блок с классом "side-two" повернем на по оси Y на 180 градусов при помощи свойства "transform: rotateY" и сдвинем по оси Z на 20 пикселей. Блок с классом "side-three" повернем на по оси Y на 90 градусов и сдвинем по оси Z на 20 пикселей. Блок с классом "side-four" повернем на по оси Y на -90 градусов и сдвинем по оси Z на 20 пикселей. Блок с классом "side-five" повернем на по оси X на 90 градусов и сдвинем по оси Z на 20 пикселей. Блок с классом "side-five" повернем на по оси X на -90 градусов и также сдвинем по оси Z на 20 пикселей.
Оставшейся код CSS просто располагает точки на каждой из сторон куба.
Напишем JavaScript код для того чтобы можно было разворачивать наш куб при помощи клавиш со стрелками на клавиатуре.
Создадим объект "RotateCube", теперь назначим необходимые свойства нашему объекту.
Свойству this.left присвоим значение "ArrowLeft" - это значение которое мы получим при нажатии на кнопку со стрелкой влево.
Свойству this.upприсвоим значение "ArrowUp" - это значение которое мы получим при нажатии на кнопку со стрелкой вверх.
Свойству this.rightприсвоим значение "ArrowRight" - это значение которое мы получим при нажатии на кнопку со стрелкой вправо.
Свойству this.downприсвоим значение "ArrowDown" - это значение которое мы получим при нажатии на кнопку со стрелкой влево.
Свойства this.rX и this.rY будут хранить угол поворота куба по оси X и Y. По умолчанию установим эти свойства в ноль.
Добавим нашему объекту метод rotate этот метод будет принимать в качестве параметра значение нажатой клавиши (key).
Затем поочередно выполним четыре проверки на то, какая клавиша была нажата.
Если была нажата кнопка со стрелкой влево уменьшаем свойство rY на 2, иначе ничего не делаем.
Если была нажата кнопка со стрелкой вверх увеличиваем свойство rX на 2, иначе ничего не делаем.
Если была нажата кнопка со стрелкой вправо увеличиваем свойство rY на 2, иначе ничего не делаем.
Если была нажата кнопка со стрелкой вниз уменьшаем свойство rX на 2, иначе ничего не делаем.
Затем изменяем свойство transform.
На весь документ повесим свойство "DOMContentLoaded". Создадим экземпляр объекта "let rCube = new RotateCube()".
Повесим на документ событие "keydown" и при возникновении события вызовем метод rotate() передав в него значение нажатой клавиши e.key
