css制作旋转3d地球（css3地球3d旋转动画）

CSS是一种很强大的网页样式语言，可以让网页变得更加生动有趣，比如制作一个旋转3D地球。下面就来了解一下如何使用CSS制作这样一个效果：

/* 设置地球容器的样式，宽高都是300像素 */#earth {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    perspective: 1000px;
/* 定义透视距离 */}
/* 设置地球样式，大小160像素 */#earth img {
    width: 160px;
    height: 160px;
}
/* 定义动画 */@keyframes rotation {
from {
    transform: rotateY(0deg);
}
to {
    transform: rotateY(360deg);
}
}
/* 地球容器执行动画 */#earth:hover img {
    animation: rotation 8s linear infinite;
    /* 执行动画，每次旋转8秒钟 */transform-style: preserve-3d;
    /* 使用3D效果 */transform-origin: center center;
}
    

代码解释：

首先，我们通过设置一个id为“earth”的容器，设置宽和高都是300像素，然后使用border-radius属性将这个盒子变成一个圆形。perspective属性可以定义透视距离，是实现3D效果的关键。

然后，我们再设置地球的大小为160像素，这里使用一个img标签，并且指定了一个id为“earth”的父元素来限制img的宽高。

接着，我们通过定义一个名为“rotation”的动画，让地球能够沿着Y轴旋转360度。我们使用animation属性来让地球执行名为“rotation”的动画，每次旋转8秒钟，并且使用transform-style:preserve-3d; transform-origin:center center; 来开启3D效果。

最后，我们把这个动画绑定到img标签的:hover事件上，这样鼠标移到地球上时就能够执行这个动画。

这样，一个简单的CSS旋转3D地球就完成啦，你也可以根据自己的需求，添加其他的样式来让它更加生动、有趣。

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