早几期文章，我说没有我做不出的交互，于是有同学加我微信，说老师你能实现这个3D效果吗？我本来想怼她一顿，这是平面软件，但是一气之下我就把她说的3D效果做出来了。

首先看看效果：

动效分析：

咋一看效果挺炫，但其实实现很简单，只是元件移动距离，和图层关系的问题。主要是要画出正斜视图正方体，因为我是用Axure画的，懒得定位，所以有点不正，但不要在意这些细节，重点讲思路，这样以后遇到一些想实现的动效，你也会开始这样思考。

一、绘制

在画布添加一个矩形，选中矩形，然后用鼠标双击边，就可以变形了。

至于怎么才能画得正，我也想知道- -几何数学好的同学可以提供一下方法，反正我是靠手感。画出三个四边形拼起来就是正方体，然后复制顶面，作为阴影。

然后连续复制六个，大家可以看出参差不齐的样子，这叫艺术效果。

有同学会问：老师，效果图明明只有四个，为什么要复制六个？

这个问题问得好，多复制对角的两个主要是为了知道这两个位置的坐标，所以我们这里把它们隐藏，为以下元素命名如下所示：

二、添加交互

这里我们不做动态面板循环动画了，直接用一个按钮点击，添加一个按钮，并为之添加效果。