Всем привет! Нужна ваша помощь :)
Суть задачи: имеется круглый div, у которого на фоне текстура планеты. Нужно сделать анимацию планеты, т.е. чтобы фон просто крутился справа налево, или наоборот (вообще разницы особой нету). Чтобы задача была более ясной, прикрепляю
скриншот<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Planets360</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bower_components/Slidebars/distribution/0.10.2/slidebars.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/prefixfree.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html">Planets360°</a></li>
</ul>
<ul class="nav navbar-nav navbar-right nav-list">
<li class="button-menu"><a href=""><i class="fa fa-pencil"></i>Интересные статьи</a></li>
<li class="button-menu"><a href=""><i class="fa fa-files-o"></i>Интересные тесты</a></li>
<li class="button-menu"><a href=""><i class="fa fa-info-circle"></i>О проекте</a></li>
</ul>
</div>
</nav>
<center>
<div class="content">
<div class="planets">
<a href="sun.html"><div id="sun"></div> Солнце</a>
<a href="mercury.html"><div id="mercury"></div> Меркурий</a>
<a href="venus.html"><div id="venus"></div> Венера</a>
<a href="earth.html"><div id="earth"></div> Земля</a>
<a href="mars.html"><div id="mars"></div> Марс</a>
<a href="jupiter.html"><div id="jupiter"></div> Юпитер</a>
<a href="saturn.html"><div id="saturn"></div> Сатурн</a>
<a href="uranium.html"><div id="uranus"></div> Уран</a>
<a href="neptun.html"><div id="neptune"></div> Нептун</a>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</center>
</body>
</html>
body {
background: url(../img/background.jpg) repeat fixed;
font-family: 'PT Sans', sans-serif;
}
i {
padding-right: 10px;
}
.container {
color: #fff;
text-align: justify;
}
.container h2{
margin-bottom: 20px;
}
.planets {
z-index: 1000:
}
.planets a{
color: #fff;
text-decoration: none;
font-size: 20px;
font-weight: 600;
}
.planets a:hover{
text-decoration: none;
color: #c2c2c2;
}
.planets img:hover {
-moz-box-shadow: 0 10px 80px rgba(255, 186, 0, 0.35);
-webkit-box-shadow: 0 10px 80px rgba(255, 186, 0, 0.35);
box-shadow: 0 10px 80px rgba(255, 186, 0, 0.35);
}
.planets h2 {
color: #fff;
font-weight: 600;
}
.planet {
margin-top: 50px;
margin-bottom: 50px;
}
#mercury {
width: 100px;
height: 100px;
background: url(/img/texture_pack/mercury.jpg);
background-size: 200px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #949494;
-webkit-box-shadow: 0 0 80px #949494;
box-shadow: 0 0 80px #949494;
}
#mercury:hover {
box-shadow: 0 0 100px #949494;
}
#venus {
width: 140px;
height: 140px;
background: url(/img/texture_pack/venus_surface.jpg);
background-size: 280px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #f5610b;
-webkit-box-shadow: 0 0 80px #f5610b;
box-shadow: 0 0 80px #f5610b;
}
#venus:hover {
box-shadow: 0 0 100px #f5610b;
}
#earth {
width: 130px;
height: 130px;
background: url(/img/texture_pack/earth/earth_daymap.jpg);
background-size: 360px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #508aff;
-webkit-box-shadow: 0 0 80px #508aff;
box-shadow: 0 0 80px #508aff;
}
#earth:hover {
box-shadow: 0 0 100px #508aff;
}
#mars {
width: 100px;
height: 100px;
background: url(/img/texture_pack/mars.jpg);
background-size: 200px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #da5f33;
-webkit-box-shadow: 0 0 80px #da5f33;
box-shadow: 0 0 80px #da5f33;
}
#mars:hover {
box-shadow: 0 0 100px #da5f33;
}
#jupiter {
width: 400px;
height: 400px;
background: url(/img/texture_pack/jupiter.jpg);
background-size: 800px;
background-color: #E0F7FA;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #bea386;
-webkit-box-shadow: 0 0 80px #bea386;
box-shadow: 0 0 80px #bea386;
}
#jupiter:hover {
box-shadow: 0 0 100px #bea386;
}
#saturn {
width: 350px;
height: 350px;
background: url(/img/texture_pack/saturn.jpg);
background-size: 700px;
background-color: #E0F7FA;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #d4bb92;
-webkit-box-shadow: 0 0 80px #d4bb92;
box-shadow: 0 0 80px #d4bb92;
}
#saturn:hover {
box-shadow: 0 0 100px #d4bb92;
}
#uranus {
width: 200px;
height: 200px;
background: url(/img/texture_pack/uranus.jpg);
background-size: 400px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #87b2b9;
-webkit-box-shadow: 0 0 80px #87b2b9;
box-shadow: 0 0 80px #87b2b9;
}
#uranus:hover {
box-shadow: 0 0 100px #87b2b9;
}
#neptune {
width: 180px;
height: 180px;
background: url(/img/texture_pack/neptune.jpg);
background-size: 360px;
animation-name: rotate;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #3e7ad0;
-webkit-box-shadow: 0 0 80px #3e7ad0;
box-shadow: 0 0 80px #3e7ad0;
}
#neptune:hover {
box-shadow: 0 0 100px #3e7ad0;
}
#sun {
width: 800px;
height: 800px;
margin-top: -400px;
margin-bottom: 25px;
background: url(/img/texture_pack/sun.jpg);
background-size: 1600px;
animation-name: move-map;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-box-shadow: 0 0 80px #f5610b;
-webkit-box-shadow: 0 0 80px #f5610b;
box-shadow: 0 0 80px #f5610b;
}
#sun:hover {
box-shadow: 0 0 100px #f5610b;
}
#mercury, #venus, #earth, #mars, #jupiter, #saturn, #uranus, #neptune, #sun {
border-radius: 100%;
transition: 0.5s;
}
#mercury, #venus, #earth, #mars, #jupiter, #saturn, #uranus, #neptune {
margin-top: 50px;
margin-bottom: 25px;
}
