------------------------------------------
Последнее редактирование:
Предлагаю дурку в -реп добавить.Анимированное меню в виде куба управления перелистованная колесико мыши
Посмотреть вложение 17624
HTML:<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Куб</title> <style> body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform 0.1s linear; } .side { position: absolute; width: 200px; height: 200px; border: 1px solid white; line-height: 200px; font-size: 40px; text-align: center; color: white; /* Полупрозрачный фон */ background-color: rgba(255, 255, 255, 0.5); /* Цвет фона с прозрачностью 50% */ } .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <div class="cube" id="cube"> <div class="side front">Передняя</div> <div class="side back">Задняя</div> <div class="side right">Правая</div> <div class="side left">Левая</div> <div class="side top">Верхняя</div> <div class="side bottom">Нижняя</div> </div> <script> const cube = document.getElementById('cube'); let xRotation = 0; let yRotation = 0; window.addEventListener('wheel', (event) => { // Получаем значение прокрутки колеса мыши const delta = event.deltaY; // В зависимости от направления прокрутки изменяем угол поворота куба if (delta > 0) { xRotation += 10; } else { xRotation -= 10; } // Применяем новые значения углов к кубу cube.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`; // Отключаем стандартную прокрутку страницы event.preventDefault(); }); window.addEventListener('mousedown', () => { // Запоминаем начальные координаты мыши при нажатии кнопки let startX; let startY; function onMouseMove(event) { const { clientX, clientY } = event; // Если начальные координаты еще не установлены, устанавливаем их if (!startX) { startX = clientX; startY = clientY; return; } // Рассчитываем разницу между текущими и начальными координатами const dx = clientX - startX; const dy = clientY - startY; // Обновляем углы поворота куба xRotation += dx * 0.25; yRotation -= dy * 0.25; // Применяем новые значения углов к кубу cube.style.transform = `rotateX(${yRotation}deg) rotateY(${xRotation}deg)`; // Сбрасываем начальные координаты после каждого движения мыши startX = clientX; startY = clientY; } // Добавляем обработчик перемещения мыши при нажатой кнопке window.addEventListener('mousemove', onMouseMove); // Удаляем обработчики при отпускании кнопки мыши window.addEventListener('mouseup', () => { window.removeEventListener('mousemove', onMouseMove); }, { once: true }); }); </script> </body> </html>