WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
menu de la barre de navigation
479
kevekıbhack
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
5 January 2024
Page de chargement avec cercle rotatif
21 July 2024
Formulaire de connexion animé
26 February 2024
Formulaire de connexion HTML CSS
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)`; });