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

В этой статье мы закончим разбираться в принципах создания анимированной Солнечной системы на 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 добавится следующее:

			<div id="mercury" class="orbit">
  <div class="pos">
    <div class="planet"></div>
  </div>
</div>
		

А в 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-приёмы мы уже разобрали. Может, пора создать свой проект?