Створюємо Сонячну систему на чистому CSS3. Частина третя. 3d-преобразования


У цій статті ми закінчимо розбиратися в принципах створення анімованої Сонячної системи на CSS3. Цього разу ми реалізуємо тривимірний вид нашої системи.

Ось що вже готово: ми створили одну планету, що обертається навколо Сонця завдяки keyframe- анімації, на яку падає динамічна тінь від зірки. Проте наша орбіта все ще кругла.

Обертаємо Сонячну систему

Тепер ми можемо продемонструвати справжню силу CSS3: ми повернемо усю систему навколо горизональной осі так, що наші орбіти стануть еліптичними. Виявляється, що CSS3 підтримує перетворення в тривимірному просторі, і ми можемо реалізувати задумане усього лише однією інструкцією:

#galaxy { ... transform: rotateX (75deg);}

Тепер уся наша Сонячна система знаходиться під кутом! Насправді поворот

‘а галактики повернув і увесь його вміст, тому тепер наше Сонце і планети – це диски, що обертаються. Усі задані нами

‘ы – це двовимірні об’єкти, тому нам треба зробити ще дещо, щоб це виправити.

Спершу нам треба повернути Сонце у зворотний бік, щоб воно знову було круглим:

#sun { ... transform: rotateX (- 75deg);}

Хмм. Не спрацювало. Сонце обернулося на 75 градусів, але вже усередині галактики, і тому залишилося плескатим. Нам треба відмінити спадкоємство повороту від галактики, і добитися цього можна, додавши властивість transform - style зі значенням preserve - 3d:

#galaxy { ...
transform-style: preserve - 3d; transform: rotateX (75deg);}

Все лагодилося: Сонце знову кругле, а орбіти – еліптичні. Коштуйте, сталося ще щось! Придивіться, і ви побачите, що планета насправді не проходить за зіркою! виходить, що при повороті групи елементів шляхом CSS- перетворень CSS3 автоматично міняє z- індекси.

Звичайно, наша планета все ще сплюснута, та і виправити це буде непросто. Займемося цим пізніше.

Розгортаємо планети назад

Значення preserve - 3d допомогло нашому Сонцю, але з планетами такий трюк не пройде, адже їх кути постійно змінюються із-за обертання орбіти. Повернути планетам початковий вид допоможе анімація, зворотна повороту, що виникає із-за анімації орбіти.

Спершу ми помістимо наші планети в спеціальний div класу pos. У цього є три переваги:

  • У планет вже є свої анімації затінювання. У одного елементу може бути лише одна анімація, і обертання кожної планети в інший елемент розв’яже цю проблему;
  • Якщо ми додамо планетам їх позначення (як в оригінальній демке), нам потрібний буде загальний для усіх планет елемент;
  • Ми можемо використати елемент .pos для отрисовки квадрата навколо планет, щоб переконатися, що вони обертаються.

Отже, в наш HTML додасться наступне:

А в CSS:

.pos { position: absolute; width: 2em; height: 2em; margin-left: - 1em; margin-top: - 1em; border: solid 1px #fff;}

Тепер ми можемо переконатися, що планета обертається:

Keyframe- анімація, застосована до усіх орбіт :

@keyframes orbit { 0% { transform: rotateZ (0deg); } 100% { transform: rotateZ (- 360deg); }}

Для ” відміни” цієї анімації застосуємо до обгорток планет таку:

@keyframes invert { 0% { transform: rotateX (- 90deg) rotateY (360deg) rotateZ (0deg); } 100% { transform: rotateX (- 90deg) rotateY (0deg) rotateZ (0deg); }}

Так, це складно представити, але спробуйте погратися зі значеннями, і ви розберетеся. У цьому вам також допоможе квадрат навколо обгортки.

Застосуємо обгортку до класу .pos:

.pos { position: absolute; transform-style: preserve - 3d; animation-name: invert;
animation-iteration-count: infinite; animation-timing-function: linear;}

От і все!

Висновок

Що ж нам залишилося? Можна додати ще планет різного розміру і з різними орбітами. Можна додати мітки планет. Проте, усі необхідні для цього CSS- прийоми ми вже розібрали. Може, пора створити свій проект?

Переклад статті “Making of the CSS 3 solar system animation”

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *