Создаём Солнечную систему на чистом CSS3. Часть третья. 3D-преобразования

solarmini1

В этой статье мы закончим разбираться в принципах создания анимированной Солнечной системы на CSS3. В этот раз мы реализуем трёхмерный вид нашей системы. 

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

See the Pen CSS 3 Solar System, Step 6 by Independent Software (@independent-software) on CodePen.

Вращаем Солнечную систему

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

Теперь вся наша Солнечная система находится под углом! На самом деле поворот <div>‘а галактики повернул и всё его содержимое, поэтому теперь наше Солнце и планеты — это вращающиеся диски. Все заданные нами <div>‘ы — это двумерные объекты, поэтому нам нужно сделать ещё кое-что, чтобы это исправить.

Сперва нам нужно повернуть Солнце в обратную сторону, чтобы оно снова было круглым:

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

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

See the Pen CSS 3 Solar System, Step 6 by Independent Software (@independent-software) on CodePen.

Конечно, наша планета всё ещё сплюснута, да и исправить это будет непросто. Займёмся этим позже.

Разворачиваем планеты обратно

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

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

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

Итак, в наш HTML добавится следующее:

А в CSS:

Теперь мы можем убедиться, что планета вращается:

See the Pen CSS 3 Solar System, Step 8 by Independent Software (@independent-software) on CodePen.

Keyframe-анимация, применённая ко всем орбитам:

Для «отмены» этой анимации применим к обёрткам планет такую:

Да, это сложновато представить, но попробуйте поиграться со значениями, и вы разберётесь. В этом вам также поможет квадрат вокруг обёртки.

Применим обёртку к классу .pos:

Вот и всё!

See the Pen CSS 3 Solar System, Step 9 by Independent Software (@independent-software) on CodePen.

Заключение

Что же нам осталось? Можно добавить ещё планет разного размера и с разными орбитами. Можно добавить метки планет. Однако, все необходимые для этого CSS-приёмы мы уже разобрали. Может, пора создать свой проект?

Перевод статьи «Making of the CSS 3 solar system animation»Иван Бирюков, страж правописания