这期我们来一起探讨如何用线条勾勒出一个简单的地球仪。废话不多说动手！！！
想要用线条勾勒出一个简单的地球仪，首先我们就得想到如何形成一个线条。这边我分享一下我的方法（用边框）
然后使用border-radius这个属性，让一个正方形的边框变成一个圆形这样的话，我们就可以进行下一步动作了。
注意：这边的容器不要设置背景颜色就让他单独形成一个圆形。效果图如下：
这边你会看打这个球形为什么会和平常看到的不一样，这个问题问的非常好。因为我给他加了旋转属性rotate。
首先我们要先通过transform-style: preserve-3d;这个属性让div变成一个3d舞台然后在设置transform：rotateX（）属性和transform：rotateY（）属性来实现他的翻转。
我这边是这样设置的：
接下来我们就要思考一个问题了，实现一个地球仪要多少个这样的线条，没错就是18条。经度需要9条，纬度需要9条。当然你也可以设置6条这边就看你个人爱好。
先设置9条绕着X轴旋转的，然后在设置9条绕着Y轴旋转的。这样就以来地球仪基本就做好了如图：
是不是感觉有点字小帅就和我一样。然后接下来我们就要实现让他自动转起来。
首先我们需要制定一个关键帧。这边我是这样制定的：
要用到@keyframes 这个属性后面接的是这个关键帧的名称（zhuan）0%的意思是开始状态，然后100%是结束状态。我写的意思就是让这个球绕着Z轴转一圈。就犹如地球仪转一圈一样。
然后我们做到这里几乎就完成了制作了完成了，现在就差最后一步了，就是调用这个关键帧。用到animation这个属性。
animation属性它的属性值就比较多了 不过常用的就是几种，上述的是合并写法，属性值用空格隔开。
第一个值就是调用的关键帧的名称了，然后呢第二个值就是 完成这个关键帧所需要的时间（我这边设置的是十秒），第三个值就是这个动画执行的类型linear也是常用到的类型，指的是匀速。
然后最后一个值的意思是infinite无限循环。好了做到这里就做完了。点击运行你会发现。
就是这样没错，不过你得脑补他是在绕着Z轴转动的。希望你能理解!
这一期就和大家分享这么点了，下期再见！！