欢迎来到我的CSS3专题系列文章，本章是最后一个章节，后续将带来更多精彩的分享，欢迎关注！

本章目标三角函数与css3的综合运用点击事件与自定义属性的妙用transition动画的运用

先来看我们今天要实现的效果吧

我们接下来一步步的分析这其中的原理吧！

基础布局

1、默认情况所有的菜单都隐藏在右下角。我们通过简单的定位就能搞定了，这里就不再赘述了，直接贴代码了

得到的结果是这样的

所有的小图标导航都被盖住了

再回过头来分析效果。当第一次点击的home图标的时候，6个小旋转出去，形成一个扇形，重点来了，怎么形成扇形？

我有四只眼睛，我看到了六个小图标形成的扇形刚好是一个圆的四分之一。六个导航把这个四分之一的扇形再平均分成了6份。我都说到这了，后面的再结合三角函数就很容易计算出它们的left和top值了

所以我们先来把展开后的效果撸一把吧

六个小菜单，我们每次只需要旋转5次就可以将它们依次展开，所有每次旋转的角度是90/5

一涉及到圆或者圆孤，要计算坐标，一定少了不正弦余弦三角函数的计算了。所以它得到的结果是这样的

接下来就是home按钮点击的来回的展开的收起效果了。

按钮的点击事件：点击第一次的时候，菜单展开，点击第二次的时候菜单收起，第三次展开，第四次收起....

所以奇数次展开，偶数次收起。类似于这路奇偶关系的切换，我们可以利用js中的Boolean来模拟一下，请看示例。

我们通常的做法是给按钮的对象上绑定一个自定义的boolean类型的属性。具体看效果。

所我们的菜单的点击逻辑也是按照这种套路来。

扇形菜单JS点击交互效果

首先我们给home按钮添加一个点击事件，然后先事件中框架搭建起来。home按钮点击的时候，奇数次旋转360deg，偶数次旋转回来至0deg，所以：

效果是这样的

可以看到，我们不停的点击home按钮，它自身将在0和360deg之间来回切换。之所以有动画效果，是因为我给了home按钮加了一个transition属性

transition:.3s;

我们在前面通过三角函数计算出了各个菜单展开后的位置，所以我们可以先将变化后的位置值挂载到元素对象的本身的自定久属性上。

然后就是动态的设置每张图片的transition属性了。

transition: property duration timing-function delay;

我圈出来的红色部分，我设置了图片的运动形式，这个字符串怎么来的？接下来我来演示一下。

最好的就是我们调整的动画运动形式。

最终的效果就出来啦！！

总结：

1）三角函数在dom中的运用，可以看出来，数学在编程中无处不在。

2）点击事件与自定义属性的综合运用，合理应用JS中的Boolean进行状态的切换，这种套路在实际项目中运用非常频繁。

这里是【畅哥聊技术】CSS3专题的系列文章的最后一章，更多其它专题还在持续准备中，敬请期待。感谢各位的支持！！

（本专题完）