.cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: rotateX(20deg) rotateY(20deg); animation: spin 10s infinite linear; } .face { position: absolute; width: 200px; height: 200px; background: black; } .face video { width: 100%; height: 100%; object-fit: cover; } /* Yüzlerin 3D konumlandırılması */ .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } /* Dönen animasyon */ @keyframes spin { from { transform: rotateX(20deg) rotateY(0deg); } to { transform: rotateX(20deg) rotateY(360deg); } } const cube = document.querySelector('.cube'); let isDragging = false; let startX, startY, currentX = 0, currentY = 0; cube.addEventListener('mousedown', (e) => { isDragging = true; startX = e.pageX - currentX; startY = e.pageY - currentY; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; currentX = e.pageX - startX; currentY = e.pageY - startY; cube.style.transform = `rotateX(${currentY}deg) rotateY(${currentX}deg)`; }); document.addEventListener('mouseup', () => { isDragging = false; });