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