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


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

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

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

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

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

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

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

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

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

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

#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”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


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

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