1.6Kпросмотров
46.0%от подписчиков
3 февраля 2026 г.
stats📷 ФотоScore: 1.7K
3D-карточка с интерактивным эффектом 1️⃣ В HTML создаём карточку с классом .card, которая обёрнута в контейнер .wrap. Это нужно для применения 3D-перспективы и центрирования карточки на странице. 2️⃣ В CSS задаём perspective: 1400px; для контейнера .wrap, чтобы создать эффект глубины. Карточка стилизована с градиентом, тенью и закруглёнными углами, а текст выдвигается вперёд через translateZ, добавляя объём. 3️⃣ В JavaScript отслеживаем движение мыши над карточкой, вычисляем координаты курсора и рассчитываем углы поворота (rotateX, rotateY). При покидании карточки она плавно возвращается в исходное положение, сохраняя естественность анимации. 🟣Полный код:
<!DOCTYPE html>
<html lang="ru">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3D Card</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #111; font-family: sans-serif; } .wrap { perspective: 1400px; } .card { width: 300px; height: 380px; background: linear-gradient(145deg, #9441fa, #441097); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); transition: transform 0.06s ease-out, box-shadow 0.1s ease-out; transform-style: preserve-3d; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; } .card h2 { margin: 0; font-size: 26px; transform: translateZ(40px); } .card p { margin-top: 10px; font-size: 16px; opacity: 0.7; transform: translateZ(20px); } </style>
</head> <body> <div class="wrap"> <div class="card" id="card"> <h2>Frontend Lab</h2> </div> </div> <script> const card = document.getElementById("card"); card.addEventListener("mousemove", (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const rotateX = (y - rect.height / 2) / 6; const rotateY = (rect.width / 2 - x) / 6; card.style.transform = rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.04) ; }); card.addEventListener("mouseleave", () => { card.style.transform = rotateX(0) rotateY(0) scale(1); }); </script>
</body>
</html> 🔥 — если было полезно! 🧑💻 Frontend Lab