Card by Tokkstrr
#212121
1/*works janky on mobile :<*/ 2.container { 3 position: relative; 4 width: 500px; 5 height: 254px; 6 transition: 200ms; 7} 8 9.container:active { 10 width: 500px; 11 height: 245px; 12} 13 14#card { 15 position: absolute; 16 inset: 0; 17 z-index: 0; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 border-radius: 20px; 22 transition: 700ms; 23 background: #191919; 24} 25 26.subtitle { 27 transform: translateY(160px); 28 color: rgb(134, 110, 221); 29 text-align: center; 30 width: 100%; 31} 32 33.title { 34 opacity: 0; 35 transition-duration: 300ms; 36 transition-timing-function: ease-in-out-out; 37 transition-delay: 100ms; 38 position: absolute; 39 font-size: 20px; 40 margin-right: 10px; 41 margin-left: 10px; 42 text-align: center; 43 color: black; 44} 45 46.tracker:hover ~ #card .title { 47 opacity: 1; 48} 49 50#prompt { 51 bottom: 8px; 52 left: 12px; 53 z-index: 20; 54 font-size: 50px; 55 font-weight: bold; 56 transition: 300ms ease-in-out-out; 57 max-width: 1000px; 58 color: rgb(255, 255, 255); 59} 60 61.tracker { 62 position: absolute; 63 z-index: 200; 64 width: 100%; 65 height: 100%; 66} 67 68.tracker:hover { 69 cursor: pointer; 70} 71 72.tracker:hover ~ #card #prompt { 73 opacity: 0; 74} 75 76.tracker:hover ~ #card { 77 transition: 300ms; 78 filter: brightness(1.1); 79} 80 81.container:hover #card::before { 82 transition: 200ms; 83 content: ""; 84 opacity: 80%; 85} 86 87.canvas { 88 perspective: 800px; 89 inset: 0; 90 z-index: 200; 91 position: absolute; 92 display: grid; 93 grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 94 grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 95 gap: 0px 0px; 96 grid-template-areas: 97 "tr-1 tr-2 tr-3 tr-4 tr-5" 98 "tr-6 tr-7 tr-8 tr-9 tr-10" 99 "tr-11 tr-12 tr-13 tr-14 tr-15" 100 "tr-16 tr-17 tr-18 tr-19 tr-20" 101 "tr-21 tr-22 tr-23 tr-24 tr-25"; 102} 103 104#card::before { 105 content: ""; 106 background: #ffcc00; 107 opacity: 0%; 108 width: 105%; 109 height: 105%; 110 border-radius: 20px; 111 position: absolute; 112 z-index: -; 113 transition: 200ms; 114} 115 116.tr-1 { 117 grid-area: tr-1; 118} 119 120.tr-2 { 121 grid-area: tr-2; 122} 123 124.tr-3 { 125 grid-area: tr-3; 126} 127 128.tr-4 { 129 grid-area: tr-4; 130} 131 132.tr-5 { 133 grid-area: tr-5; 134} 135 136.tr-6 { 137 grid-area: tr-6; 138} 139 140.tr-7 { 141 grid-area: tr-7; 142} 143 144.tr-8 { 145 grid-area: tr-8; 146} 147 148.tr-9 { 149 grid-area: tr-9; 150} 151 152.tr-10 { 153 grid-area: tr-10; 154} 155 156.tr-11 { 157 grid-area: tr-11; 158} 159 160.tr-12 { 161 grid-area: tr-12; 162} 163 164.tr-13 { 165 grid-area: tr-13; 166} 167 168.tr-14 { 169 grid-area: tr-14; 170} 171 172.tr-15 { 173 grid-area: tr-15; 174} 175 176.tr-16 { 177 grid-area: tr-16; 178} 179 180.tr-17 { 181 grid-area: tr-17; 182} 183 184.tr-18 { 185 grid-area: tr-18; 186} 187 188.tr-19 { 189 grid-area: tr-19; 190} 191 192.tr-20 { 193 grid-area: tr-20; 194} 195 196.tr-21 { 197 grid-area: tr-21; 198} 199 200.tr-22 { 201 grid-area: tr-22; 202} 203 204.tr-23 { 205 grid-area: tr-23; 206} 207 208.tr-24 { 209 grid-area: tr-24; 210} 211 212.tr-25 { 213 grid-area: tr-25; 214} 215 216.tr-1:hover ~ #card { 217 transition: 125ms ease-in-out; 218 transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); 219} 220 221.tr-2:hover ~ #card { 222 transition: 125ms ease-in-out; 223 transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); 224} 225 226.tr-3:hover ~ #card { 227 transition: 125ms ease-in-out; 228 transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); 229} 230 231.tr-4:hover ~ #card { 232 transition: 125ms ease-in-out; 233 transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); 234} 235 236.tr-5:hover ~ #card { 237 transition: 125ms ease-in-out; 238 transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); 239} 240 241.tr-6:hover ~ #card { 242 transition: 125ms ease-in-out; 243 transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); 244} 245 246.tr-7:hover ~ #card { 247 transition: 125ms ease-in-out; 248 transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); 249} 250 251.tr-8:hover ~ #card { 252 transition: 125ms ease-in-out; 253 transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); 254} 255 256.tr-9:hover ~ #card { 257 transition: 125ms ease-in-out; 258 transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); 259} 260 261.tr-10:hover ~ #card { 262 transition: 125ms ease-in-out; 263 transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); 264} 265 266.tr-11:hover ~ #card { 267 transition: 125ms ease-in-out; 268 transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); 269} 270 271.tr-12:hover ~ #card { 272 transition: 125ms ease-in-out; 273 transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); 274} 275 276.tr-13:hover ~ #card { 277 transition: 125ms ease-in-out; 278 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 279} 280 281.tr-14:hover ~ #card { 282 transition: 125ms ease-in-out; 283 transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); 284} 285 286.tr-15:hover ~ #card { 287 transition: 125ms ease-in-out; 288 transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); 289} 290 291.tr-16:hover ~ #card { 292 transition: 125ms ease-in-out; 293 transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); 294} 295 296.tr-17:hover ~ #card { 297 transition: 125ms ease-in-out; 298 transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); 299} 300 301.tr-18:hover ~ #card { 302 transition: 125ms ease-in-out; 303 transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); 304} 305 306.tr-19:hover ~ #card { 307 transition: 125ms ease-in-out; 308 transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); 309} 310 311.tr-20:hover ~ #card { 312 transition: 125ms ease-in-out; 313 transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); 314} 315 316.tr-21:hover ~ #card { 317 transition: 125ms ease-in-out; 318 transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); 319} 320 321.tr-22:hover ~ #card { 322 transition: 125ms ease-in-out; 323 transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); 324} 325 326.tr-23:hover ~ #card { 327 transition: 125ms ease-in-out; 328 transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); 329} 330 331.tr-24:hover ~ #card { 332 transition: 125ms ease-in-out; 333 transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); 334} 335 336.tr-25:hover ~ #card { 337 transition: 125ms ease-in-out; 338 transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); 339} 340 341.noselect { 342 -webkit-touch-callout: none; 343 /* iOS Safari */ 344 -webkit-user-select: none; 345 /* Safari */ 346 /* Konqueror HTML */ 347 -moz-user-select: none; 348 /* Old versions of Firefox */ 349 -ms-user-select: none; 350 /* Internet Explorer/Edge */ 351 user-select: none; 352 /* Non-prefixed version, currently 353 supported by Chrome, Edge, Opera and Firefox */ 354} 355
220 views
Variation of acard
MIT License