122 lines
1.9 KiB
CSS
122 lines
1.9 KiB
CSS
:root {
|
|
--timing: 400ms;
|
|
--rotation: 20deg;
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
place-content: center;
|
|
min-height: 100vh;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.pk {
|
|
width: 300px;
|
|
aspect-ratio: 9 / 16;
|
|
/* background-image: url("/.jpg"); */
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transition: rotate var(--timing) ease;
|
|
}
|
|
|
|
|
|
.pk::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 100;
|
|
/*background-image: radial-gradient(circle, transparent 150px, black);*/
|
|
opacity: 0;
|
|
transition: opacity var(--timing);
|
|
}
|
|
|
|
.pk:hover {
|
|
rotate: x var(--rotation);
|
|
}
|
|
|
|
|
|
|
|
.pk:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pk::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 80% 0.5rem 0.5rem;
|
|
translate: 0;
|
|
transform: translateZ(-100px);
|
|
background: black;
|
|
filter: blur(1rem);
|
|
z-index: 1;
|
|
transition: rotate var(--timing), translate var(--timing);
|
|
}
|
|
|
|
.pk:hover::after {
|
|
rotate: x calc(var(--rotation) * -1);
|
|
translate: 0 60px;
|
|
}
|
|
|
|
|
|
|
|
.logo,
|
|
.front-image {
|
|
position: absolute;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
z-index: 10;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
background-size: auto;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.logo {
|
|
z-index: 1000;
|
|
filter: invert(1);
|
|
width: 65%;
|
|
margin-inline: auto;
|
|
inset: auto 0 2rem;
|
|
transform: translateY(0rem) translateZ(20px);
|
|
transition: var(--timing);
|
|
}
|
|
|
|
.pk:hover .logo {
|
|
transform: translateY(-2rem) translateZ(20px);
|
|
rotate: x calc(var(--rotation) * -1);
|
|
}
|
|
|
|
.front-image {
|
|
scale: 1.125;
|
|
transform-origin: bottom;
|
|
opacity: 0;
|
|
z-index: 100;
|
|
transition: var(--timing);
|
|
}
|
|
|
|
.pk:hover .front-image {
|
|
opacity: 1;
|
|
transform: translateY(-2rem) translateZ(-10px);
|
|
rotate: x calc(var(--rotation) * -1);
|
|
}
|
|
|
|
.inspiration {
|
|
font-family: system-ui;
|
|
text-align: center;
|
|
max-width: 25ch;
|
|
-webkit-margin-before: 3rem;
|
|
margin-block-start: 3rem;
|
|
margin-inline: auto;
|
|
}
|