Buonasera a tutti!
Sono un principiante di JavaScript, ho bisogno del vostro aiuto.
Stavo provando a creare una carta interattiva animata come nel video in allegato, ma non va come desideravo.
Sapete per caso dove si trova l'errore? In allegato il codice.
Grazie in anticipo della rispostacodice:<!DOCTYPE html> <html lang="it-IT"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BETA</title> <style> .container { width: 400px; height: 240px; } .card { width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(to bottom right, #9847FF 0%, #C447FF 100%); } .card { --x-pos: 0.5; --y-angle: calc(var(--x-pos) * 5 deg); --y-pos: 0; --x-angle: calc(var(--y-pos) * 5 deg); transform: perspective(200px) rotateY(var(--y-angle)) rotateX(var(--x-angle)); } </style> </head> <body> <script> const container = document.querySelector('.container'); const card = document.querySelector('.card'); const { width, height } = container.getBoundingClientRect(); container.addEventListener('mousemove', (event) => { const { offsetX, offsetY } = event; card.style.setProperty('--x-pos', (offsetX / width) - 0.5); card.style.setProperty('--y-pos', (offsetY / height) - 0.5); }); </script> <div class="container"> <div class="card"> <!--Contents card--> </div> </div> </body> </html>
NewTechSlyDev_
Rispondi quotando
