Солнечная система. Анимация с помощью CSS

<style type="text/css">

div.cosmos {
   background: url(/ax/d1/1/a626/Fr0r.jpg);
   box-sizing: border-box;
   perspective: 600px;
   overflow:hidden;
}

.planets{
    width: 90vw;
    height: 30vw;
    margin: 0px auto;
    transform: rotateX(70deg);
    transform-style: preserve-3d;
}

.block1 {
   transform-style: preserve-3d;
   border: 1px solid gold;
   border-radius: 50%;
   position: absolute;
   animation: orbe infinite linear;
}

.orbit_sun {
   top: calc(50% - 50px);
   left: calc(50% - 50px);
   animation: none;
}

.orbit_mercury {
   width: 130px;
   height: 130px;
   top: calc(50% - 65px);
   left: calc(50% - 65px);
   animation-duration: 6s;
}

.orbit_venus {
   width: 170px;
   height: 170px;
   top: calc(50% - 85px);
   left: calc(50% - 85px);
   animation-duration: 8s;
}

.orbit_earth {
   width: 230px;
   height: 230px;
   top: calc(50% - 115px);
   left: calc(50% - 115px);
   animation-duration: 10s;
}

.orbit_moon {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
   left: calc(50% - 140px);
}

.orbit_mars {
   width: 310px;
   height: 310px;
   top: calc(50% - 155px);
   left: calc(50% - 155px);
   animation-duration: 12s;
}

.orbit_jupiter {
   width: 400px;
   height: 400px;
   top: calc(50% - 200px);
   left: calc(50% - 200px);
   animation-duration: 14s;
}

.orbit_saturn {
   width: 550px;
   height: 550px;
   top: calc(50% - 275px);
   left: calc(50% - 275px);
   animation-duration: 16s;
}

.orbit_uran {
   width: 650px;
   height: 650px;
   top: calc(50% - 325px);
   left: calc(50% - 325px);
   animation-duration: 18s;
}

.orbit_neptun {
   width: 750px;
   height: 750px;
   top: calc(50% - 375px);
   left: calc(50% - 375px);
   animation-duration: 20s;
}

.block2 {
   position: absolute;
   borde: 1px solid white;
   border-radius: 50%;
   transform-style: preserve-3d;
   animation: invert infinite linear;
}

.sun {
   width: 100px;
   height: 100px;
   background: url(/ax/d1/1/a626/FuE8.png);
   background-size: cover;
   transform: rotateX(-80deg);
   animation: sun 90s infinite linear;
}

.mercury {
   width: 15px;
   height: 15px;
   top: 60px;
   left: -8px;
   background: url(/ax/d1/1/a626/FuE4.png);
   animation-duration: 6s;
}

.venus {
   width: 25px;
   height: 25px;
   top: 75px;
   left: -15px;
   background: url(/ax/d1/1/a626/FuFB.png);
   animation-duration: 8s;
}

.earth {
   width: 30px;
   height: 30px;
   top: 100px;
   left: -20px;
   background: url(/ax/d1/1/a626/FuE1.png);
   animation-duration: 10s;
}

.moon {
   width: 8px;
   height: 8px;
   top: 16px;
   left: -5px;
   background: url(/ax/d1/1/a626/FuE5.png);
   animation-name: moon;
   animation-duration: 10s;
}

.mars {
   width: 25px;
   height: 25px;
   top: 142px;
   left: -15px;
   background: url(/ax/d1/1/a626/FuE3.png);
   animation-duration: 12s;
}

.jupiter {
   width: 60px;
   height: 60px;
   top: 170px;
   left: -30px;
   background: url(/ax/d1/1/a626/FuE2.png);
   animation-duration: 14s;
}

.saturn {
   width: 90px;
   height: 50px;
   top: 250px;
   left: -40px;
   background: url(/ax/d1/1/a626/FuE7.png);
   animation-duration: 16s;
}

.uran {
   width: 20px;
   height: 20px;
   top: 315px;
   left: -10px;
   background: url(/ax/d1/1/a626/FuFA.png);
   animation-duration: 18s;
}

.neptun {
   width: 20px;
   height: 20px;
   top: 365px;
   left: -10px;
   background: url(/ax/d1/1/a626/FuE6.png);
   animation-duration: 20s;
}

.block2 {
   background-size: cover;
}

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

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

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

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

</style>

<div class="cosmos">

	<div class="planets">

	  <div class="orbit_sun block1">
		 <div class="sun"></div></div>
	 
	  <div class="orbit_mercury block1">
		   <div class="mercury block2"></div></div>
	 
	  <div class="orbit_venus block1">
		   <div class="venus block2"></div></div>

	  <div class="orbit_earth block1">
		 <div class="earth block2"></div>

		 <div class="orbit_moon block1">
		   <div class="moon block2"></div></div>
	 </div>

	  <div class="orbit_mars block1">
		   <div class="mars block2"></div></div>

	  <div class="orbit_jupiter block1">
		   <div class="jupiter block2"></div></div>

	  <div class="orbit_saturn block1">
		   <div class="saturn block2"></div></div>
	 
	  <div class="orbit_uran block1">
		   <div class="uran block2"></div></div>
	 
	  <div class="orbit_neptun block1">
		   <div class="neptun block2"></div></div>
		   
	</div>

</div>

Комментарии: 0

Похожее

Ученые обнаружили область Вселенной без звезд и галактик

Астрофизики нашли возможное объяснение существованию реликтового холодного пятна в созвездии Эридана. В этой области Вселенной температура микроволнового излучения на 70 микрокельвинов меньше, чем в окружающем пространстве, где она равна 2,7 кельвина.
Гигантские радиогалактики

Олег Верходанов

О количестве галактик видимой Вселенной, квазарах и спектре мощности рассказывает Олег Верходанов — доктор физико-математических наук, ведущий научный сотрудник Специальной астрофизической обсерватории РАН, Нижний Архыз.
«На кончике пера» открыта трансплутоновая планета размером с Нептун

В Солнечной системе, вероятно, есть еще одна чрезвычайно удаленная планета размером с Нептун, совершающая один оборот вокруг Солнца за 10–20 тысяч лет. Сенсационную статью на эту тему опубликовали 20 января два уважаемых планетолога, Константин Батыгин и Майк Браун из Калифорнийского технологического института, проводившие детальный анализ орбит уже известных нам транснептуновых объектов. Они готовы предъявить скептикам результаты многомесячного компьютерного моделирования.
Астрохимия: как появились те атомы, из которых мы состоим?

Алексей Паевский

Атомы, из которых мы состоим, стабильны и неизменны. Однако появились они в разное время. Их объединяет одно: все они — продукт жизнедеятельности самой Вселенной. Какие-то появились в результате Большого Взрыва, какие-то родились в недрах звёзд, а какие-то только при их гибели. По сути, мы — звёздный прах. Речь пойдет о процессах астрохимии, приведших к появлению разных атомов, которыми заполнена вселенная.
Зависимость «период-светимость звезд»

Чем дольше период изменения блеска переменной звезды класса цефеид, тем больше энергии она излучает.
Космология и наблюдательные данные: что «так», а что «не так», и сколько это может продолжаться

Дмитрий Горбунов

В первой половине лекции мы обсудим наблюдаемые, дающие представление о составе и истории развития Вселенной и познакомимся со Стандартной космологической моделью. Вторая половина лекции будет посвящена обсуждению разных аномалий и нестыковок при попытках дальнейшего уточнения физических параметров, с чем пришлось столкнуться в последние годы. Означает ли это, что мы подошли к следующей ступени понимания физики и космологии, или это рубеж, определяемый систематическими погрешностями используемых экспериментальных методов, пока неизвестно. Я постараюсь показать, какие математические задачи возникают в космологии.
Закон Хаббла

Кажущаяся скорость удаления галактики от нас прямо пропорциональна расстоянию до нее.
Законы Кеплера

Иоганн Кеплер обладал чувством прекрасного. Всю свою сознательную жизнь он пытался доказать, что Солнечная система представляет собой некое мистическое произведение искусства. Сначала он пытался связать ее устройство с пятью правильными многогранниками классической древнегреческой геометрии. Во времена Кеплера было известно шесть планет, которые, как полагалось, помещались на вращающихся «хрустальных сферах». Кеплер утверждал, что эти сферы расположены таким образом, что между соседними сферами точно вписываются правильные многогранники. Увы, сравнив свою модель с наблюдаемыми орбитами планет, Кеплер вынужден был признать, что реальное поведение небесных тел не вписывается в очерченные им стройные рамки.
Современная космология: взгляд радиоастронома

Олег Верходанов

Революционные открытия последних 15 лет в области космологии сделали эту область астрофизики одной из наиболее точных наук. Существенную роль в понимании природы Вселенной сыграла радиоастрономия, история которой связана с уникальными астрофизическими экспериментами. Достаточно вспомнить открытие и исследование радиогалактик и квазаров, пульсаров, атомарных и молекулярных линий, гравитационных линз и сверхмассивных черных дыр. Однако, на мой взгляд, самыми важными событиями стали открытие реликтового излучения и обнаружение его неоднородностей. Это привело к построению картины мира начала XXI века, на которую ориентируется современное естествознание. Мы познакомимся с методами исследования реликтового излучения и определения глобальных параметров Вселенной, а также обсудим нерешенные загадки Вселенной.
Агора / Agora (2009)

Действие происходит в Александрии (Египет), в конце эпохи Римской Империи (на рубеже IV и V веков). Христианство набирает популярность и, опираясь на низы общества, становится политической силой. В это переломное время живёт философ, математик и астроном Гипатия, имеющая большое влияние на умы правителей…

Далее >>>

∀ x, y, z

Солнечная система. Анимация с помощью CSS

Теги

Похожее