移动应用展示的 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文件即可观赏。
<style type="text/css">
body {
background:#d2d1d5;
}
.tg-wrap {
width:100%;
height:80px;
}
.btn {
display:block;
border:1px solid white;
border-radius:20px;
}
.toggle {
width:100px;
height:40px;
margin:10px auto;
color:white;
cursor:pointer;
text-align:center;
line-height:40px;
}
.pe-wrap {
width:100%;
height:700px;
position:relative;
}
.pe-perspective {
perspective:1200px;
perspective-origin:0% 0%;
position:relative;
width:310px;
height:630px;
margin:0 auto;
}
.pe-device {
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform 0.5s ease-in-out;
transform:rotateX(10deg) rotateY(17deg);
}
.pe-object {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-1;
}
.pe-object .pe-front {
width:100%;
height:100%;
background:url("http://o93mwnwp7.bkt.clouddn.com/demo/phone/iphone_white.png") no-repeat top left;
background-size:100% 100%;
}
.pe-pages {
position:absolute;
left:18.29px;
top:74px;
width:272.8px;
height:482.391px;
}
.pe-pages div {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
cursor:pointer;
}
.pe-pages .page-1 {
background:url("https://tympanus.net/Development/3DEffectMobileShowcase/images/screen1_1.png") no-repeat center center;
background-size:100% 100%;
transition:transform 0.7s ease-in-out 0.35s,opacity 0.4s;
}
.pe-pages .page-2 {
background:url("https://tympanus.net/Development/3DEffectMobileShowcase/images/screen1_2.png") no-repeat center center;
background-size:100% 100%;
transition:transform 0.7s ease-in-out 0.3s,opacity 0.4s;
}
.pe-pages .page-3 {
background:url("https://tympanus.net/Development/3DEffectMobileShowcase/images/screen1_3.png") no-repeat center center;
background-size:100% 100%;
transition:transform 0.7s ease-in-out 0.25s,opacity 0.4s;
}
.pe-pages .page-4 {
background:url("https://tympanus.net/Development/3DEffectMobileShowcase/images/screen1_4.png") no-repeat center center;
background-size:100% 100%;
transition:transform 0.7s ease-in-out 0.2s,opacity 0.4s;
}
.pe-pages .page-5 {
background:url("https://tympanus.net/Development/3DEffectMobileShowcase/images/screen1_5.png") no-repeat center center;
background-size:100% 100%;
transition:transform 0.7s ease-in-out 0.15s,opacity 0.4s;
}
.expand-view .pe-device {
transform:rotateY(50deg) rotateX(20deg) translateZ(-15px) translateZ(-285px);
}
.expand-view .pe-pages:hover:not(.active) {
opacity:0.1;
}
.expand-view .page-1 {
transform:translateZ(85px);
}
.expand-view .page-2 {
transform:translateZ(155px);
}
.expand-view .page-3 {
transform:translateZ(225px);
}
.expand-view .page-4 {
transform:translateZ(295px);
}
.expand-view .page-5 {
transform:translateZ(365px);
}
</style>
<body>
<div class="tg-wrap">
<div id="j-toggle" class="btn toggle">Toggle</div>
</div>
<div class="pe-wrap">
<div id="j-view" class="pe-perspective">
<div class="pe-device">
<div class="pe-object">
<div class="pe-front"></div>
</div>
<div class="pe-pages" id="jPageList">
<div class="page-1"></div>
<div class="page-2"></div>
<div class="page-3"></div>
<div class="page-4"></div>
<div class="page-5"></div>
</div>
</div>
</div>
</div>
<script>
function toggleView(){
document.querySelector("#j-view").classList.toggle("expand-view");
}
// 切换事件
document.querySelector("#j-toggle").addEventListener("click",toggleView,false)
// 鼠标划过事件
const aPages = document.getElementById("jPageList").getElementsByTagName("div");
// 循环添加鼠标滑进滑出事件
[].slice.call(aPages).forEach((item,index)=>{ item.addEventListener("mouseenter",function(){
this.classList.add("active");
},false)
item.addEventListener("mouseleave",function(){
this.classList.remove("active");
},false)
})
</script>
</body>
然而，百度第一行关键词，我发现了…… 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，最重要的是无需登录。
网友评论