灰色执照2023-11-28
前言
在可视化设计中，我们经常用到的一种设计技法就是让物体 / 菜单 / 卡片按照圆形或者椭圆形的路径进行旋转。这种形式的动画制作简单，空间立体感强，视觉效果也好。我们来看一个具体的设计案例：
这个案例来源于我们灰大设计中心，由红飞同学设计制作。你可以点击这里查看这个设计素材的详细介绍。
对于设计师来说制作旋转路径动画相对简单，但是在交付过程中程序员好实现吗？带着这个疑问，我一番探索后发现：非常简单，仅仅是利用 CSS 就可以实现上述所有效果（包括鼠标移动到菜单上就停止旋转），完全不需要写任何一行 JS 代码。今天我们就以这个设计素材作为案例来实现里面的旋转效果。我们由浅入深，逐步讲解以下5个示例。
示例1 按照正圆形旋转
▲ 可以随意控制菜单的个数、旋转的方向、旋转的速度
示例2 按照椭圆形旋转
▲ 通过简单的修改，正圆即可变成椭圆
示例3 将旋转对象改成实际上案例中的卡片
示例4 三维旋转
▲ 如果想要这种三维形式，也是可以做到的
示例5 加上鼠标控制菜单的悬停（和其它细节）
▲ 这个案例只提供源码，大家可以通过源码学习一下如何制作主视觉
相信学会以上5个案例后，你一定可以完全掌握旋转的奥秘，可以应对工作中的各种旋转效果。如果你不是程序员，只是UI设计师，我也强烈建议你仔细阅读本篇文章。学习一些简单的“代码”知识。这样有利于你在今后的工作中和程序更好的沟通。俗话说技多不压身，我相信这些浅显的代码知识一定可以帮助你更好的成为一个优秀的设计师。让你的工作技能如虎添翼！另外，你也不需要害怕学习代码，因为我自己就是UI设计师，我从事了13年UI工作，3年前才转行成程序员。
如果你是程序员了，我的文章可能会让你觉得讲解有点过于细致了，因为我的粉丝更多的设计师，我要尽可能多照顾小白，所以希望你更有耐心一点来阅读我的文章。
在开始编码之前，你需要点击右侧按钮下载案例中用到的所有图片素材下载图片素材下载提取码 yse0
下载好需要用到的图片素材后就可以跟着教程步骤来学习了。在学习完所有案例后，你需要交一份作业来验证你的学习成果。就是实现以下效果：
无论是交作业还是获取正确答案，都请加微信号：huisezhizhao 我拉你进入代码学习群，我会在群公告里公布作业的正确答案。加我微信的时候记得说明来意。
废话不多说了，我们直接开始吧~
示例1 按照正圆形旋转
在开始示例之前，我们先需要有一个空白的html页面，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>示例1</title>
<style type="text/css">
*{margin:0; padding:0;}
</style>
</head>
<body>
</body>
</html>
有了这样一个空白页面后，我们就可以在内部填写内容了。所有的样式，我都将写到style标签里面，所有的 HTML 标签，都写到body标签中间。由于每个浏览器都对标签设置了默认的值，所以在开始编写 CSS 以前，我们需要「重置」一下这些默认值。这个部分你需要自己搜索 CSS Reset这个关键字来完成，为了让示例变得更加简单易学，我们暂时用 *{margin:0; padding:0;}来简化这一过程。
接下来，我们给页面加上一个深色的背景，并且通过 flex 布局让界面的元素居中显示，这样就可以确保我们的旋转对象永远在屏幕的正中间。
body, html{
width: 100%;
height: 100%;
overflow: hidden;
background: #11131f;
display: flex;
align-items: center;
justify-content: center;
}
▲ 背景的颜色值 #11131f 是我用吸管工具吸取红飞设计稿里面得到的。align-items 设置了上下居中，justify-content 则设置了左右居中。
我们页面里面加入一个div标签，样式名叫做container，设置他的宽度和高度为420px（代表圆圈的直径）详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>示例1</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body, html{
width: 100%;
height: 100%;
overflow: hidden;
background: #11131f;
display: flex;
align-items: center;
justify-content: center;
}
.container{
position: relative;
width: 420px;
height: 420px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
实际上，你现在就是得到了下面这样一个东西，它永远处于页面的正中心。
因为我们的素材作者设计了6个菜单，所以我们需要在container里面放6个和container大小一样的div，html的dom结构如下：
<div class="container">
<div>
<div><img src="./images/01a.png" /></div>
</div>
<div>
<div><img src="./images/01b.png" /></div>
</div>
<div>
<div><img src="./images/01c.png" /></div>
</div>
<div>
<div><img src="./images/01d.png" /></div>
</div>
<div>
<div><img src="./images/01e.png" /></div>
</div>
<div>
<div><img src="./images/01f.png" /></div>
</div>
</div>
它的样式，则是下面这样，我们的目的是在每个div里面的左上角又放置一个小的div。它的宽度和高度180px，并且向左上角偏移一半。顺便说明一下，为什么小div的宽度是180px呢？因为菜单图片的高度是177px，我们取一个整数，并且弄成宽度和高度都一样，确保它（正方形）旋转的时候不会发生偏移。
.container>div{
position: absolute;
width: 100%;
height: 100%;
}
.container>div>div{
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
position: absolute;
top: -90px;
left: -90px;
}
我们现在得到的是6个这样的东西，他们在页面的正中央，并且重叠在一起。这里的蓝色大div其实没有背景色，用户是看不到任何东西的。红色小div则是用来放菜单图片的。用户真正看到的就是这些红色的部分。
为了让你更直观的理解，我画了上面这个图，把这些div倾斜后区分出层次，最底层蓝色的就是container的子集div（代码也用蓝色标注了），红色小div则是container子集的子集，最里面白色的01则是我们菜单的png图片。
▲ 蓝色部分是大div，红色部分是小div，白色的01实际上是菜单图片
接下来，我们让这6个div依次旋转起来，因为圆的一周是360度，360 / 6 = 60度。那么它们旋转的角度应该是依次增加60度，即：0度、60度、120度、180度、240度、300度。CSS中，我们就应该增加这些：
