[data-kantel] {
--kg-mx: 0;
--kg-my: 0;
--kg-diepte: 900px;
--kg-kantel: 10deg;
--kg-groei: 1.04;
--kg-hef: -6px;
--kg-voor: 46px;
--kg-schaal: 1;
--kg-lift: 0px;
--kg-vooruit: 0px;
transform-style: preserve-3d;
transform:
perspective(var(--kg-diepte))
rotateY(calc(var(--kg-mx) * var(--kg-kantel)))
rotateX(calc(var(--kg-my) * var(--kg-kantel) * -1));
scale: var(--kg-schaal);
translate: 0 var(--kg-lift);
transition:
background-color 0.18s ease,
transform 0.12s ease-out,
scale 0.3s cubic-bezier(0.22, 1, 0.36, 1),
translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-kantel]:hover,
[data-kantel]:focus-visible {
--kg-schaal: var(--kg-groei);
--kg-lift: var(--kg-hef);
--kg-vooruit: var(--kg-voor);
z-index: 1;
}
[data-kantel-voor] {
transform: translateZ(var(--kg-vooruit));
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: none) {
[data-kantel]:hover {
--kg-schaal: 1;
--kg-lift: 0px;
--kg-vooruit: 0px;
}
[data-kantel][data-inbeeld] {
--kg-schaal: var(--kg-groei);
--kg-lift: var(--kg-hef);
--kg-vooruit: var(--kg-voor);
z-index: 1;
}
}