一、前言
上一節,介紹了基礎的CSS3 3D動畫原理實現,也舉了一個小小的例子來演示,但是有朋友跟我私信說想看看一些關于CSS3 3D的實例,所以在這里為了滿足一下大家的需求,同時也為了以后能夠更好的鞏固CSS3 3D的知識,所以在這里寫下這篇博文,希望能夠幫助你更好的理解3D的制作和實現原理,同時也歡迎各位小伙伴對文中的錯誤給予指正
二、入門案例分析
這里先說一說我的規劃,我打算先從入門級的案例入手,然后依次遞推,最后要達到的效果是,理解完所有的例子的設計思路,基本上CSS3-3D制作就能夠隨心所欲。
1、矩形圖片翻滾效果
這個效果比較簡單,所以在這里就不多做解釋了,先來復習一下上一節說的要創建一個3D環境,我們需要創建一個“燈光”,“舞臺”,“演員”(相當于perspective、preserve-3d、image),不清楚的小伙伴請看這里,具體的代碼如下:
新聞熱點
疑難解答