首页 > 代码库 > css3 地球3d旋转
css3 地球3d旋转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>地球3d旋转
</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="http://www.mamicode.com/cir.svg";
aImg.style.transformStyle="preserve-3d";
aImg.style.position="absolute";
aImg.style.transform="rotateX("+i+"deg)";
oDiv.appendChild(aImg);
}
*/
}
</script>
</head>
<body>
<div id="sun"></div>
<div id="box">
<div id="shadow"></div>
<div id="img"></div>
<div id="div1">
</div>
</div>
<div></div>
</body>
</html>
css3 地球3d旋转