<!doctype html>
<meta charset= "Utf-8" >
<title> Earth 3d Rotation </title>
<style>
body{height:768px; overflow:hidden; Background-color: #000}
#sun {width:2000px; height:2000px; Background-image:url (images/dc4.png); background-size:100% 100%; Position: Absolute right:-1400px; top:-1000px;
border-radius:1000px;
box-shadow:0 0 200px #F30,
0 0 20px #F00,
0 0 10px #FF0,
0 0 200px #F30;
ANIMATION-NAME:BBB;
animation-duration:360s;
Animation-iteration-count:infinite;
Animation-timing-function:linear}
#box {
width:400px;
height:400px;
Position:absolute;
top:300px;
left:300px;
border-radius:200px;
/*transform-style:preserve-3d;
Transform:rotatex (70DEG); */
Transform:rotate ( -15DEG);
Overflow:hidden;
box-shadow:0 0 30px #00F,
0 0 30px #00F;
}
#shadow {
width:400px;
height:400px;
border-radius:200px;
Position:absolute;
z-index:999;
box-shadow:0px 0 80px Black inset,
60px 0 60px Black inset;
}
#img {
width:2400px;
height:400px;
Position:absolute;
left:-800px;
Background-image:url (images/mapa.jpg);
border-radius:200px;
ANIMATION-NAME:AAA;
animation-duration:10s;
Animation-iteration-count:infinite;
Animation-timing-function:linear
}
#div1 {
width:400px;
height:400px;
border-radius:200px;
Position:absolute;
Background:-webkit-gradient (radial,330 200,10,330 200,80,from (#FFF), to (blue));
opacity:0.3;
/*transform-style:preserve-3d;
Transform:translatex (400px); */
/*ANIMATION-NAME:AAA;
animation-duration:5s;
Animation-iteration-count:infinite;
animation-timing-function:linear;*/
}
@keyframes ccc{
0%{
background-position:-80px 0px;
}
50%{
background-position:0px-80px;
}
100%{
background-position:-80px 0px;
}
}
@keyframes bbb{
0%{
Transform:rotate (0DEG);
}
100%{
Transform:rotate (360DEG);
}
}
@keyframes aaa{
0%{
left:-2000px;
}
100%{
left:-800px;
}
}
</style>
<script>
Window.onload=function ()
{
/*
var odiv = document.getElementById ("Div1");
for (var i = 0;i<=180;i++)
{
var aimg = document.createelement ("img");
Aimg.src= "Cir.svg";
Aimg.style.transformstyle= "Preserve-3d";
aimg.style.position= "Absolute";
Aimg.style.transform= "Rotatex (" +i+ "deg)";
Odiv.appendchild (AIMG);
}
*/
}
</script>
<body>
<div id= "Sun" ></div>
<div id= "box" >
<div id= "Shadow" ></div>
<div id= "img" ></div>
<div id= "Div1" >
</div>
</div>
<div></div>
</body>
CSS3 Earth 3d Rotation