16 lines
1.6 KiB
Markdown
16 lines
1.6 KiB
Markdown
|
# 🪐 Solar System Orrery
|
||
|
|
|
||
|
|
Масштабная интерактивная модель Солнечной системы (Orrery), реализованная на чистом CSS3. Проект включает в себя Солнце и все планеты, вращающиеся по своим орбитам с реалистичным соотношением скоростей.
|
||
|
|
|
||
|
|
### Особенности
|
||
|
|
|
||
|
|
- **Pure CSS Motion**: Каждая планета использует уникальную анимацию `@keyframes` для вращения по орбите.
|
||
|
|
- **Visual Accuracy**: Соблюдены относительные размеры планет и периоды их обращения (от быстрого Меркурия до медленного Плутона).
|
||
|
|
- **Infinite Background**: Использование повторяющегося звездного фона для создания эффекта глубокого космоса.
|
||
|
|
|
||
|
|
### Технические детали
|
||
|
|
|
||
|
|
- **Orbital Mechanics**: Анимация реализована через двойную трансформацию (`rotate` -> `translateY` -> `rotate`), что позволяет планетам сохранять вертикальную ориентацию во время вращения.
|
||
|
|
- **Timing**: Значения `animation-duration` подобраны в соответствии с реальными астрономическими данными.
|
||
|
|
- **Layers**: Четкое разделение слоев (`z-index`) для планет и их орбитальных путей (`-path`).
|