这篇“css3如何实现围绕圆心公转”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css3如何实现围绕圆心公转”文章吧。
css3实现围绕圆心公转的方法：1、创建一个HTML示例文件；2、定义一个div；3、通过“.out {border-radius: 150px;background-color: sandybrown;...”属性设置外层圆；4、使用animation和transform等属性定义基点并实现围绕圆心公转即可。
效果如图
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>公转不自转</title> <style> .out { margin-top: 200px; margin-left: 200px; position: relative; height: 300px; width: 300px; border-radius: 150px; background-color: sandybrown; box-shadow: 0 0 23px; } .cover { display: inline-block; width: 50px; height: 50px; position: absolute; transform-origin: 150px 150px; animation: smile linear 5s infinite; background-color: springgreen; } img { width: 50px; height: 50px; animation: smile reverse linear 5s infinite; } @keyframes smile { to { transform: rotateZ(360deg); } } .out span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; } </style></head><body> <div> <div> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1577100031&di=7445f215ef1f860d45fd93be22b52f57&src=http://git.oschina.net/uploads/group/110103951448978.jpg" alt=""> </div> <span>和蔼的笑脸</span> </div></body></html>
以上就是关于“css3如何实现围绕圆心公转”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
