html5地球如何实现转动

html-css010

html5地球如何实现转动,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>旋转</title>

<style>

* {margin:0padding:0border:0}

div {width:200pxheight:200pxmargin-left:100pxmargin-top:-100px}

img {width:200pxheight:200pxborder-radius:100pxanimation:myfirst 5s linear infinite-webkit-animation:myfirst 5s linear infiniteanimation-play-state:running-webkit-animation-play-state:running}

img:hover {animation-play-state:paused-webkit-animation-play-state:paused}

@keyframes myfirst {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}

@-webkit-keyframes myfirst {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}

</style>

</head>

<body>

<p style="margin-top:100px"></p>

<div><img src="163146_vN8g_574908.jpg"/><div>

</body>

</html>

需要的图片

如果你是要做一个旋转的3D地球,建议有两种可行办法:

1.用软件制作一组图片,把这个序列按序一张张播放(很好实现,但只是幻灯片一样播放)

2.3D模型:这个比较难(如果你要再做一个可缩放的,会超麻烦),使用Canvas+WebGL+CreateJS可以较好地简化工作(具体参见ie.microsoft.com/testdrive和www.beautyoftheweb.cn/developers和www.beautyoftheweb.cn/Content/zh-CN/Developers/atari/index.html)