【转载】用CSS动态展示有立体效果的APP截图

移动应用展示的 3D 效果

移动应用程序展示的精美 3D 效果，其中应用程序屏幕动画显示为分层堆栈。

机翻改，转自 Codrops，《3D Effect for Mobile App Showcase》
原文图片以及部分链接丢失，但演示、下载链接仍可访问，源码以此MIT协议开源，允许商用。

原文由 Mary Lou 写于 2013 年 8 月 1 日，原本在 Codrops 的Playground 中实现。

演示 （支持在移动设备观赏）: http://tympanus.net/Development/3DEffectMobileShowcase/

下载源 ：http://tympanus.net/Development/3DEffectMobileShowcase/3DEffectMobileShowcase.zip

---

今天我们想与您分享一个实验性的 3D 效果。它涉及一个 3D 移动设备和一些移动应用程序截图。单击切换按钮时，我们将为移动设备设置动画以进行旋转，并移动每个屏幕，以便最终获得分层视图。您以前肯定见过这种应用程序的演示，我们认为用 CSS 来做它可能会很有趣。

请注意：这仅在支持相应 CSS 属性的浏览器中按预期工作。仅限现代浏览器！

这个想法是通过轻微的初始旋转来定位移动设备：

然后我们将一个CSS类应用给布局容器，这将使设备转换到第二个位置，而且屏幕会以分层堆栈的形式移出。

效果一如下：

第二种效果有不同的旋转：

第三个还会显示一些文字标签：

展开的屏幕是锚点元素，因此你们可以将它们实际链接到最终的信息页面。这里有很多可能性，去疯吧。

包含一个 SCSS 文件，用于处理设备的一些尺寸变量和其他一些变量。

模拟的 3D 手机运用了一种圆角技术，涉及侧面的伪元素，最初由出色的网页设计师和开发人员 Jonathan Levaillant 设计并 实施。

我们希望您喜欢这些效果，并希望它们能给您一些启发。

---

转载评论：
简直美极了，伟大的作品！ 睿智又圆润，而且 —— 来自于未来一般，难道是2020年吗？ 做得好。
请给我发私信。 我想谈谈一点儿事情。

干杯，继续做你正在做的事情，玛丽，你是最棒的。

问候。

另有见此原文，试其代码者，代码转贴下方，有缺陷（图片素材缺失、收起动画BUG），但总计不过两百行，得其要也。存为HTML文件即可观赏。

    
Toggle


    

        

            

                

            
            

                

                

                

                

                

            
        
    

然而，百度第一行关键词，我发现了…… http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141021252.html

https://tympanus.net/codrops 这个网站有许多webgl结合文本页面的demo，比如https://tympanus.net/codrops/2019/12/20/how-to-create-the-apple-fifth-avenue-cube-in-webgl/、https://tympanus.net/Tutorials/the-substance/，点击页面上的“Previouse demo”就可以切换上一个，不知如何切换下一个 。

有些年代久远的demo访问很慢。Jquery 之家搜集了一部分，可以去找，此网站可以找到关联或者有趣的demo，最重要的是无需登录。