what is impress.js

impress.js 是一個用于展示的前端框架，基于大量 css3 的動畫等特性。最大的特點是其基于 transform 來構建，通過空間位置的移動以及旋轉來體現變化，視覺沖擊性很強。

該庫需要有很好的css功底以及空間想象能力

你是否已經厭倦了那些傳統的幻燈片形式的表現方式？

你是否也認為在現代瀏覽器里，表現形式不應該受‘傳統’的幻燈片模式的限制？

你是否希望讓你的演講以令人震撼的視覺效果來打動你的觀眾？

那么你應該試一試? ?impress.js

它是一個展現工具?

是受prezi.com的啟發?

使用了現代瀏覽器里支持的CSS3 transforms 和 transitions功能。

把你的雄偉思想可視化

你的小小想法立體化

在無限的畫布上通過定位，旋轉和縮放把它們表現出來

如何用 impress.js 設計 presentation(外觀)

基本思路

對于每個頁面來說只有三種重要的屬性——scale，position，rotate。

scale 決定了該頁的大小。對應屬性 width，height

position 決定了在三維空間中的坐標。對應屬性 transform

rotate 則是旋轉方式。對應屬性 rotate[XYZ]

繞 X 軸

繞 Y 軸

繞 Z 軸

impress.js 會根據這些屬性將每一頁進行渲染，最后從第一頁開始一步步進行播放，因此這些屬性也就決定了補間動畫的形式。在開始寫代碼之前一定要想好空間結構。

為一個step的class增加slide標簽，那么你就得到了一張帶白色背景和一些特殊樣式的類似ppt單張的div，

當然，這些樣式是需要引入impress-demo.css的，你不引入的話是沒有的。也可以自己修改定義，事實上原作者建議你這么做

數據屬性：用來描述幻燈片大小，切換等效果。

　　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軸旋轉多少度。

用它做的不只局限于此，唯一的限制是你的創造力！

當你有把錘子的時候,你看什么都像釘子