#keyboard {
width: 500px;
height: 200px;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
}
.key {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 5px;
transform: translateZ(25px);
transition: all 0.1s ease-in-out;
}
.key:hover {
transform: translateZ(30px);
}
const keyboard = document.getElementById('keyboard');
keyboard.addEventListener('click', (event) => {
if (event.target.classList.contains('key')) {
// Play a sound or display a message when a key is clicked
}
});
function spinKeyboard() {
keyboard.style.transform = `rotateX(${Math.random() * 360}deg) rotateY(${Math.random() * 360}deg)`;
requestAnimationFrame(spinKeyboard);
}
spinKeyboard();