html5 3d旋转地球源代码

HTML5 3D旋转地球源代码

3D旋转地球#earth {
    width: 400px;
    height: 400px;
    perspective: 1000px;
}
#earth img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    transition: transform 1s linear;
}
    var earth = document.getElementById("earth");
    var img = earth.getElementsByTagName("img")[0];
    var start = 0;
setInterval(function() {
    start = (start + 0.1) % 360;
    img.style.transform = "rotateY(" + start + "deg)";
}
    , 50);
    

HTML5 3D旋转地球是一种基于HTML5和CSS3技术的前端动画效果。本效果使用了CSS3中的3D透视效果和过渡效果。通过JS实现了对地球的旋转操作，最终形成了一个带有3D效果的地球旋转动画。

HTML部分包含了head标签和body标签。在head标签中，设置了文档的标题、字符集和样式表。在body标签中，创建了一个div容器，并附加了一个img标签。img标签中引入了地球的图片。

CSS部分设置了div容器的高度、宽度以及透视效果。img标签则使用绝对定位布局，并设置为距离父容器顶部和左侧均为0。同时，img标签的转换原点设置为中心。过渡效果用于使地球旋转具有动态感。

JS部分实现了对地球图片的实时旋转。首先获取了地球容器div和地球图片img的元素，然后通过setInterval()方法循环执行旋转操作。每隔50毫秒，对当前旋转角度进行计算，并设置img标签的旋转角度属性，从而实现地球的平滑旋转动画。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！