簡介：在網頁中傳統的照片查看一直是網格-列表，現在我們可以突破這種限制，獲得和現實中一樣的自由。隨意擺放的照片，超酷的切換動畫；還能翻開照片，查看圖片簡介。
本課程主要有兩個部分；前半部分以原理分析和前端界面實現為主，后半部分則是腳本來處理的一些特效與總結。
第1章 前期準備
介紹了這個案例在現實生活中的原型，以及在其他的應用程序中的應用，同時還介紹了一種通用的分析方法，從 “VCD” 的角度去分析一個案例的實現。
第2章 前端界面
介紹了特效的源碼結構，以及所需的素材。接著根據前期準備中介紹的 “V”（VIEW），把案例中所需要的界面素材全部編寫出來。其中用 CSS 編寫了大部分的視覺效果，以及對應特效的基本動作。并且通過瀏覽器開發工具，用手動切換的方式驗證了3D切換的視覺動作特效。
第3章 JS腳本編寫
介紹了這個案例中的“D”（DATA）數據部分，同時通過改造之前的 VIEW，通過一個函數把所有的海報的 HTML 通過腳本的形式生成并輸出。然后通過一個隨機數的算法，隨機選中一個海報作為當前選中展現的海報。再接著通過計算左右分區的范圍，把剩余的海報的位置和角度也隨機分配了出去。最后結合“前端界面”部分中的翻轉控制，完整實現了控制按鈕的輸出、翻轉控制、以及自身的翻轉特效。
第4章 優化與總結
介紹了通過一些簡單的樣式調整，使得整個特效的動作更加流暢，然后講解了如何去兼容Firefox瀏覽器，接著給出了一些思考，如何調整切換動畫。最后對案例中用到的特殊 CSS 以及 JS 中的一些特別的方法進行了總結。