Анимированные карточки с крутым 3D эффектом на CSS3
Очень интересный эффект для карточек - при наведении происходит впечатляющий 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
.card { width: var(--card-width); height: var(--card-height); position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 36px; perspective: 2500px; margin: 0 50px; } .cover-image { width: 100%; height: 100%; object-fit: cover; } .wrapper { transition: all 0.5s; position: absolute; width: 100%; z-index: -1; } .card:hover .wrapper { transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); } .wrapper::before, .wrapper::after { content: ""; opacity: 0; width: 100%; height: 80px; transition: all 0.5s; position: absolute; left: 0; } .wrapper::before { top: 0; height: 100%; background-image: linear-gradient( to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97% ); } .wrapper::after { bottom: 0; opacity: 1; background-image: linear-gradient( to bottom, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97% ); } .card:hover .wrapper::before, .wrapper::after { opacity: 1; } .card:hover .wrapper::after { height: 120px; } .title { width: 100%; transition: transform 0.5s; } .card:hover .title { transform: translate3d(0%, -50px, 100px); } .character { width: 100%; opacity: 0; transition: all 0.5s; position: absolute; z-index: -1; } .card:hover .character { opacity: 1; transform: translate3d(0%, -30%, 100px); } |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<a href="//" alt="Mythrill" target="_blank" rel="noopener"> <div class="card"> <div class="wrapper"> <img src="/img/dark_rider-cover.jpg" class="cover-image" /> </div> <img src="/img/dark_rider-title.png" class="title" /> <img src="/img/dark_rider-character.webp" class="character" /> </div> </a> <a href="//" alt="Mythrill" target="_blank" rel="noopener"> <div class="card"> <div class="wrapper"> <img src="/img/force_mage-cover.jpg" class="cover-image" /> </div> <img src="/img/force_mage-title.png" class="title" /> <img src="/img/force_mage-character.webp" class="character" /> </div> </a> |
