Compare commits

...

2 commits

Author SHA1 Message Date
01c91a9ea3 Merge pull request 'feat(ptica): slow turntable rotation on insolation preview cube' (#1856) from chore/ptica-iso-preview-spin into main
All checks were successful
Deploy / changes (push) Successful in 7s
Deploy / build-backend (push) Has been skipped
Deploy / build-worker (push) Has been skipped
Deploy / build-frontend (push) Successful in 3m10s
Deploy / deploy (push) Successful in 1m9s
2026-06-20 20:47:36 +00:00
829439a4fa feat(ptica): slow turntable rotation on insolation preview cube
All checks were successful
CI / backend-tests (pull_request) Has been skipped
CI / changes (pull_request) Successful in 7s
CI / openapi-codegen-check (pull_request) Successful in 1m51s
CI / frontend-tests (pull_request) Successful in 1m0s
The «Инсоляционная матрица» preview cube now gently rotates (rotateY
turntable with a constant rotateX tilt for depth) so the 3D module reads
as alive without opening the drawer. Pure CSS; honours prefers-reduced-motion.
2026-06-21 01:46:00 +05:00

View file

@ -2441,16 +2441,37 @@
} }
/* Инсоляционная матрица — faint preview massing + ПРЕВЬЮ placeholder */ /* Инсоляционная матрица — faint preview massing + ПРЕВЬЮ placeholder */
/* Ambient «turntable» rotation of the massing-preview cube gives a sense of
the 3D module without opening the drawer. A constant slight rotateX keeps a
sliver of depth visible as it passes edge-on. */
@keyframes pticaIsoSpin {
from {
transform: rotateX(14deg) rotateY(0deg);
}
to {
transform: rotateX(14deg) rotateY(360deg);
}
}
.isoBoxPreview { .isoBoxPreview {
height: 74px; height: 74px;
display: grid; display: grid;
place-items: center; place-items: center;
margin: 2px 0 10px; margin: 2px 0 10px;
opacity: 0.55; opacity: 0.55;
perspective: 540px;
} }
.isoBoxPreview svg { .isoBoxPreview svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
transform-style: preserve-3d;
transform-origin: 50% 50%;
will-change: transform;
animation: pticaIsoSpin 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.isoBoxPreview svg {
animation: none;
}
} }
.isoPreviewLeft { .isoPreviewLeft {
fill: rgba(150, 192, 214, 0.1); fill: rgba(150, 192, 214, 0.1);