《一統江湖的大前端》系列是自己的學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了, , , , , , 甚至 ，什麼火就搞什麼,絕對是專業的 蹭熱點小能手 。 ...
《一統江湖的大前端》系列是自己的學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了,
手機app開發,桌面應用開發,用於神經網路人工智慧的庫,頁面游戲,數據可視化, 甚至嵌入式開發，什麼火就搞什麼,絕對是專業的蹭熱點小能手。
impress.js是什麼
impress.js 是一款基於 css-3D 和 css動畫 、受到高逼格PPT原型工具 prezi 啟發而開發的演示文稿製作庫,github上星星高達33k個,如果你已經厭煩了使用PowerPoint製作連自己都覺得醜的PPT，那麼 impress.js 是一個非常好的選擇，簡潔高效逼格高。
獲取impress.js庫文件及官方示例請點擊impress.js地址
關鍵API
下述api用於HTML標簽屬性，學習時直接對照官方代碼倉中的example走一遍，看一遍示例代碼，基本都能學會。
- data-x = 幻燈片的x坐標
- data-y = 幻燈片的y坐標
- data-scale = 通過指定一個值來進行縮放，data-scale為5則將會在你幻燈片原始尺寸基礎放大5倍
- data-rotate = 通過一個數字度數來確定旋轉你的幻燈片
- data-rotate-x = 為3D用，這個數字度數是它應該相對x軸旋轉多少度。（前傾/後仰）
- data-rotate-y = 為3D用，這個數字度數是它應該相對y軸旋轉多少度。 （左擺/右擺）
- data-rotate-z = 為3D用，這個數字度數是它應該相對z軸旋轉多少度。
實戰示例
附件中的 CSS-presentation 可通過雙擊文件中的index.html直接打開，是自己以前在做團隊內部分享時使用 impress.js製作的幻燈片，時間較短，直接套用了官方示例並對個別細節進行了調整，放出來方便大家參考交流.
相關原理
impress.js的框架原理並不複雜，寫在html標簽上的屬性可以通過 document.querySelector('元素名').dataset["屬性名"]的方式取得其值,然後將每一張幻燈片相關的值賦值給CSS3D相關的屬性，併為其設定過渡時的漸變動畫即可。
CSS3D是指transition漸變，animation動畫以及transform變形
