当前位置主页 > 资料库 > 前端教程 > 移动手机(Mobile) App展示3d动画效果

移动手机(Mobile) App展示3d动画效果

10-21

查看演示 下载地址

本教程将和大家分享一个移动手机(Mobile) App展示3d效果。效果中将使用到一个3d移动手机和一些app应用的截图。当点击切换按钮,移动手机交旋转一定的角度,然后使所有的app应用截图在手机上方呈堆叠状排列显示。你之前是否见过这种App展示,我想那一定是使用CSS做的。

注意: 这个例子只在少数几个现代浏览器中有效果。

我们要稍微的移动一下手机,使它旋转一定的角度,如下图:

移动手机

然后,我们将通过一个包装类来使手机过渡到第二种状态,这时App截图出现在手机上方,如下图:

移动手机App展示

第二种效果使用了不同的旋转方式:

移动手机App展示的第二种效果

第三种效果是在第二种效果的基础上添加了一些说明:

移动手机App展示的第三种效果

在下载的压缩包中包含一个手机和App旋转角度变量的其它变量的SCSS文件,你可以参考它来修改展示的效果。

本教程就到这里,希望对你有所帮助!

查看演示 下载地址

Previous:
上一篇:使用CSS TRANSFORMS创建圆形菜单
Next:
下一篇:制作可拖拽显示的弹性堆叠图片展示效果
返回顶部