移動(dòng)應(yīng)用展示的 3D 效果

移動(dòng)應(yīng)用程序展示的精美 3D 效果，其中應(yīng)用程序屏幕動(dòng)畫顯示為分層堆棧。

機(jī)翻改，轉(zhuǎn)自 Codrops，《3D Effect for Mobile App Showcase》
原文圖片以及部分鏈接丟失，但演示、下載鏈接仍可訪問，源碼以此MIT協(xié)議開源，允許商用。

原文由 Mary Lou 寫于 2013 年 8 月 1 日，原本在 Codrops 的Playground 中實(shí)現(xiàn)。

演示 （支持在移動(dòng)設(shè)備觀賞）: http://tympanus.net/Development/3DEffectMobileShowcase/

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

今天我們想與您分享一個(gè)實(shí)驗(yàn)性的 3D 效果。它涉及一個(gè) 3D 移動(dòng)設(shè)備和一些移動(dòng)應(yīng)用程序截圖。單擊切換按鈕時(shí)，我們將為移動(dòng)設(shè)備設(shè)置動(dòng)畫以進(jìn)行旋轉(zhuǎn)，并移動(dòng)每個(gè)屏幕，以便最終獲得分層視圖。您以前肯定見過這種應(yīng)用程序的演示，我們認(rèn)為用 CSS 來做它可能會(huì)很有趣。

請注意：這僅在支持相應(yīng) CSS 屬性的瀏覽器中按預(yù)期工作。僅限現(xiàn)代瀏覽器！

這個(gè)想法是通過輕微的初始旋轉(zhuǎn)來定位移動(dòng)設(shè)備：

然后我們將一個(gè)CSS類應(yīng)用給布局容器，這將使設(shè)備轉(zhuǎn)換到第二個(gè)位置，而且屏幕會(huì)以分層堆棧的形式移出。

效果一如下：

第二種效果有不同的旋轉(zhuǎn)：

第三個(gè)還會(huì)顯示一些文字標(biāo)簽：

展開的屏幕是錨點(diǎn)元素，因此你們可以將它們實(shí)際鏈接到最終的信息頁面。這里有很多可能性，去瘋吧。

包含一個(gè) SCSS 文件，用于處理設(shè)備的一些尺寸變量和其他一些變量。

模擬的 3D 手機(jī)運(yùn)用了一種圓角技術(shù)，涉及側(cè)面的偽元素，最初由出色的網(wǎng)頁設(shè)計(jì)師和開發(fā)人員 Jonathan Levaillant 設(shè)計(jì)并 實(shí)施。

我們希望您喜歡這些效果，并希望它們能給您一些啟發(fā)。

轉(zhuǎn)載評論：
簡直美極了，偉大的作品！ 睿智又圓潤，而且 —— 來自于未來一般，難道是2020年嗎？ 做得好。
請給我發(fā)私信。 我想談?wù)勔稽c(diǎn)兒事情。

干杯，繼續(xù)做你正在做的事情，瑪麗，你是最棒的。

問候。

另有見此原文，試其代碼者，代碼轉(zhuǎn)貼下方，有缺陷（圖片素材缺失、收起動(dòng)畫BUG），但總計(jì)不過兩百行，得其要也。存為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)

// 鼠標(biāo)劃過事件
const aPages = document.getElementById("jPageList").getElementsByTagName("div");

// 循環(huán)添加鼠標(biāo)滑進(jìn)滑出事件
[].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>

然而，百度第一行關(guān)鍵詞，我發(fā)現(xiàn)了…… http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141021252.html

https://tympanus.net/codrops 這個(gè)網(wǎng)站有許多webgl結(jié)合文本頁面的demo，比如https://tympanus.net/codrops/2019/12/20/how-to-create-the-apple-fifth-avenue-cube-in-webgl/、https://tympanus.net/Tutorials/the-substance/，點(diǎn)擊頁面上的“Previouse demo”就可以切換上一個(gè)，不知如何切換下一個(gè) 。

有些年代久遠(yuǎn)的demo訪問很慢。Jquery 之家搜集了一部分，可以去找，此網(wǎng)站可以找到關(guān)聯(lián)或者有趣的demo，最重要的是無需登錄。