feat(ptica): slow turntable rotation on insolation preview cube
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.
This commit is contained in:
parent
9370c7af8e
commit
829439a4fa
1 changed files with 21 additions and 0 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue