Анимированное меню в виде куба управления перелистованная колесико мыши
Посмотреть вложение 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>
Предлагаю дурку в -реп добавить.
урок для кого? Для тех кто прошел курсы edu it-гигантов?
вот зачем оно нам?
Во-первых, дизайн 2000-х, сейчас эра легкого дизайна, чего-то объемного (не плоского в пространстве, не путай).
Во-вторых, для чего? Ну, я придумал как можно хранить сообщения на бересте, но какое применение? Покажи пример внутри gta, авось подтянется.
В-третьих, круто, что ты отрыл нейронку, серьезно, это крутой инструмент. Я без иронии и стеба, я ей нередко пользуюсь. Но увы, все что дает нейронка - нельзя принимать за чистую монету. Это инструмент, а не исполнитель. Не нужно всё что она даёт «показывать». Взял, покрутил, повертел, запомнил, сделал сам. Это называется обучение с учителем, где нейронка в каком-то виде учитель.
В-четвёртых, что с «задняя»? Почему она задом)))
Резюме: очень круто, что ты через объяснение на форуме пытаешься научиться сам. Так в целом и работает обучение. Многие педагоги говорят такое, не зазря сейчас эра «p2p” в педагогике, тот же прости и упаси Господи ФГОС (немного в мою темную сторону увело). Можешь взять, кто накинул +реп и сделать чатик в телеграме и друг другу показывать крутые вещички (я без иронии и стеба, я также раньше делал). Но здесь немного другая специфика, здесь львиная (не зря я употребил это слово) часть форума раза в 3 старше тебя. 90% в 2 (Харланд, ждем отчет с яндекс метрики). Мы всё-таки успели поиграться таким, ну или знаем как решать. У нас вопросы стоят чутка выше уровнем, если мы будем постить подобного рода контент, то форум будет 88 сообщений в час иметь, где каждый 3-й «как центрировать div” (да ios закрывай нормально кавычки тварь). Ну и эт, не ври, что используешь ИИ, максимально глупо выглядит.
я пытался не обидеть, а нормальным языком описать. если покажется иначе, напиши в тг(ссылка в подписи), я тебе голосовое запишу со своей интонацией (2.5р/ч напомню (шутка (нет)))!
всем добра и развития!