WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
menu da barra de navegação
890
kevekıbhack
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
28 May 2025
Abertura de rolagem
3 February 2025
recrutamento de força especial
14 January 2026
Clone do jogo Geometry Dash em JavaScript
HTML
Copy
3D kevakıb Menü
Anasayfa
Hakkında
Projeler
İletişim
Blog
Çıkış
Menüyü Döndür
CSS
Copy
body { margin: 0; background: #121212; color: white; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .scene { width: 200px; height: 200px; perspective: 800px; margin-bottom: 20px; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 1s ease; } .face { position: absolute; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255, 255, 255, 0.1); border: 1px solid #888; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); backface-visibility: hidden; } .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); } button { padding: 10px 20px; font-size: 16px; background: #00bcd4; color: white; border: none; border-radius: 10px; cursor: pointer; transition: background 0.3s ease; } button:hover { background: #0097a7; }
JS
Copy
let angle = 0; const cube = document.getElementById("menuCube"); const rotateBtn = document.getElementById("rotateBtn"); rotateBtn.addEventListener("click", () => { angle += 90; cube.style.transform = `rotateY(${angle}deg)`; });