3D自由变换卡片交互动效!

教程内容:

初学者教程,使用3D变换功能实现卡片翻转的效果

跟着下面的步骤一步一步开始制作吧!

制作素材


◇制作第1个画板

绘制5个矩形并填充图片制作卡片,每个卡片都开启3D变换功能,将5个卡片打组

A2D39B52-4A7C-4CF4-BF4A-8AC26F5C7E7F.png


◇制作第2个画板

复制第1个画板,并将卡片组开启3D变换功能,并分别调整每个卡片至合适位置

BA4E6F9C-5B40-44FE-AEDB-EDE8C84617D3.png

◇制作第3个画板

复制第1个画板,并将中间的卡片按Y轴旋转360°,将其余卡片按下图位置调整至画板外侧

18C9BFDE-4056-4D7E-A253-F7C3F8298BC4.png

AF468A69-A0B8-4773-A8EC-62E41D8AE97B.png

制作交互

链接1-2两个画板,添加点击自动对齐动画

链接2-3两个画板,添加点击对齐自动动画

61761A56-6363-4103-807E-18FE4168A2F4.png

效果制作完成

点击前往查看→查看视频教程


标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作