Интерактивные 3D карточки, которые наклоняются вслед за курсором на CSS3 и jQuery
Прикольные карточки с 3D эффектом при наведении
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.overlay { background-color: rgba(255, 255, 255, 0.4); width: 100vw; height: 100vh; position: absolute; } .card { backdrop-filter: blur(5px); min-width: 35vh; height: 55vh; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.051), 0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09), 0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129), 0px 0px 109px rgba(0, 0, 0, 0.18); transition: all .1s ease; } .glare-container { width: 100%; height: 100%; overflow: hidden; position: relative; } .glare { position: absolute; left: 100%; bottom: -50%; width: 150%; height: 150%; background: rgb(255, 255, 255); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 20% ); transform: rotateZ(35deg); pointer-events: none; filter: blur(4px); transition: all .1s ease; } .card-0{ background-color: rgba(0, 166, 255, 0.3); } .card-1 { background-color: rgba(255, 59, 0, 0.37); } .card-2 { background-color: rgba(255, 0, 0, 0.23); } .wrapper{ display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; align-items: center; height: 100vh; } |
2#: Перед закрывающим тегом <head> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { var limits = 15.0; $(".card").mousemove(function (e) { var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; //x position within the element. var y = e.clientY - rect.top; //y position within the element. var offsetX = x / rect.width; var offsetY = y / rect.height; var rotateY = (offsetX) * (limits * 2) - limits; var rotateX = (offsetY) * (limits * 2) - limits; var shadowOffsetX = (offsetX) * 32 - 16; var shadowOffsetY = (offsetY) * 32 - 16; $(this).css({ "box-shadow": (1 / 6) * -shadowOffsetX + "px " + (1 / 6) * -shadowOffsetY + "px 3px rgba(0, 0, 0, 0.051), " + (2 / 6) * -shadowOffsetX + "px " + (2 / 6) * -shadowOffsetY + "px 7.2px rgba(0, 0, 0, 0.073), " + (3 / 6) * -shadowOffsetX + "px " + (3 / 6) * -shadowOffsetY + "px 13.6px rgba(0, 0, 0, 0.09), " + (4 / 6) * -shadowOffsetX + "px " + (4 / 6) * -shadowOffsetY + "px 24.3px rgba(0, 0, 0, 0.107), " + (5 / 6) * -shadowOffsetX + "px " + (5 / 6) * -shadowOffsetY + "px 45.5px rgba(0, 0, 0, 0.129), " + -shadowOffsetX + "px " + -shadowOffsetY + "px 109px rgba(0, 0, 0, 0.18)", transform: "perspective(1000px) rotateX(" + -rotateX + "deg) rotateY(" + rotateY + "deg)" }); var glarePos = rotateX + rotateY + 90; $(this) .children() .children() .css("left", glarePos + "%"); }); $(".card").mouseleave(function (e) { $(".card").css({"box-shadow": "0px 0px 3px rgba(0, 0, 0, 0.051), 0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09), 0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129), 0px 0px 109px rgba(0, 0, 0, 0.18)", "transform": "scale(1.0)"}); $(".glare").css("left", "100%"); }); }); </script> |
3#: После открывающего тега <body> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="overlay"></div> <div class="wrapper"> <div class="card card-0"> <div class="glare-container"> <div class="glare"> </div> </div> </div> <div class="card card-1"> <div class="glare-container"> <div class="glare"> </div> </div> </div> <div class="card card-2"> <div class="glare-container"> <div class="glare"> </div> </div> </div> </div> |
