impress.js 是國外一位開發者受 Prezi 啟發，采用 CSS3 與 JavaScript 語言完成的一個可供開發者使用的表現層框架(演示工具)。其功能包括畫布的無限旋轉與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時，也支持傳統 PowerPoint 形式的幻燈演示。目前 impress.js 是基於 webkit 瀏覽器（Chrome、Safari）開發，而在其它基於非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運行。
impreess源碼已經發布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
OK，言歸正傳！看了兩篇博客，自己也忍不住想要把 impress.js 分享一下，裝X利器嘛，所以請原諒我在裝X！相信大家通過第一段已經對impress.js有了大概的了解，沒錯，上面一段我是Copy的！（文章結尾會附上出處） 所以嘛，你懂的，我在裝X！
當你習慣並開始厭倦使用PowerPoint來制作PPT的時候，impress.js的出現確實讓人按捺不住內心對新鮮事物的嘗試，不過前提是你得懂點前端知識會比較好。當然，如果你天資聰穎，那你就直接無視我然后行動吧！
在從GitHub上下載下來的文件里面你會發現怎么沒有說明/使用文檔，其實，他的使用說明全在html文件的注釋里。但是呢，對於英文不好的童鞋，這般鳥語確實是折磨！我個人覺得其實原文閱讀難度並不大，只要偶爾有道一下，閱讀一遍后基本就可以懂了，下次直接忽略這些注釋即可。但如果你還是受不鳥，這里有個別人已經翻譯好的：
http://www.360doc.com/content/12/1207/15/176942_252688895.shtml
中文的demo：http://eyehere.net/wp-content/uploads/2012/11/impress_cn.html#/bored
雖然通過上面的鏈接基本可以學會使用了impress.js，但是我這里還是得大概總結一下！
首先將HTML簡單搭建一下，先將impress-demo.css 和 impress.js 兩個文件引入：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>impress.js 使用方法</title> <link href="css/impress-demo.css" rel="stylesheet" /> <link rel="shortcut icon" href="favicon.png" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> </head> <body class="impress-not-supported"> <div id="impress"> </div> <script src="js/impress.js"></script> <script>impress().init();</script> </body> </html>
body元素一般添加一個名為‘impress-not-supported’的class，這個class可以很方便的判斷當前的瀏覽器是不是支持我們所需的css或腳本，若瀏覽器不支持，可以用這個類來顯示一些回調的信息。雖然impress.js會檢測並自動加上去，但是最好還是自己添加上去比較保險哦！
當瀏覽器不支持時，我們可以加一個回調消息，僅在有`impress-not-supported`類名的body下顯示：
<div class="fallback-message"> <p>尊駕的瀏覽器太老土啦！<b>無法滿足impress.js的要求</b>，現在你只能看到一些最朴素的演示畫面。</p> <p>為了欣賞漂亮的演示畫面，請使用先進、優雅、快速、美麗、免費的現代瀏覽器，比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 。</p> </div>
創建一個id="impress"的wrapper(載體)，一般直接用div就好，我們所有的場景都放在這里div里面。當然其他標簽也可以，不過id名稱必須是impress。
<div id="impress"> </div>
data-transition-duration 屬性來改變切換場景的速度，默認是1000（也就是1秒）。data-perspective 屬性來改變透視的深度，默認是1000。如果設置為0的話，就看不到任何3D效果了。一般情況下默認就行，也就是不需要設置了。
在wrapper內創建一個幻燈片只需簡單地創建一個class="step"的<div>即可。<div>的id可有可無，當有id時url中的hash變化是隨着id走，即使你沒有給它定義，你依然可以使用 step-N 來找到這一幕(場景)。因為id屬性僅僅是用來表示場景的URL的，事實上也不是必須的東西。
<div class="step"> 一個場景 </div>
羅列一下數據屬性：
data-x ，data-y ，data-z ： 它們定義了元素中心在畫布的位置（即設置幻燈片的x,y,z坐標），默認是0；
data-scale ：定義了元素縮放的比率，默認是1，data-scale為5則將會在你幻燈片原始尺寸基礎放大5倍；
data-rotate ：通過一個數字度數來確定旋轉你的幻燈片，正數順時針旋轉，負數逆時針旋轉；
data-rotate-x ：3D場景用，相對x軸旋轉多少度。（前傾/后仰）；
data-rotate-y = 3D場景用，相對y軸旋轉多少度。 （左擺/右擺）；
data-rotate-z = 3D場景用，相對z軸旋轉多少度，其實效果跟data-rotate 一樣。
其實數據屬性並不難，使用起來也很簡單，主要還是你的想法創意有多牛，實現起來有多炫酷，這些才是你花功夫的地方！
拿demo的代碼做為例子：
在下面這個場景里，我們給它設置了`data-x="-1000"`和`data-y="-1500`的屬性。這意味着這個元素在整個幻燈片的(-1000px, -1500px)處。
<div id="bored" class="step slide" data-x="-1000" data-y="-1500"> <q>你是不是覺得傳統的幻燈片都 <b>弱爆了</b> ？</q> </div>
這一次我們寫了一個`data-scale="4"`，這樣一來，這個元素就會被放大成原來的4倍。如果從這個場景退出，它會被還原原來的大小（縮小4倍）。
<div id="title" class="step" data-x="0" data-y="0" data-scale="4"> <span class="try">那么，您應該嘗試一下</span> <h1>impress.js<sup>*</sup></h1> <span class="footnote"><sup>*</sup>美式的小幽默，無視</span> </div>
我們使用了`data-rotate="90"`屬性，這就意味着這這個場景會被順時針旋轉90度。
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> <p>它是一個 <strong>演示工具</strong> <br/> 受<a href="http://prezi.com">prezi.com</a>啟發 <br/> 基於現代瀏覽器中 <strong>強大的CSS3特效</strong> 開發而成</p> </div>
我們還可以定義第三個坐標，就是`data-z`。加上了`data-z="-3000"`，意味着這個場景離我們有3000px那么遠。
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1"> <p>或者 <span style="font-size:smaller">細致</span> 的 <span class="thoughts">想法</span></p> </div>
全局預覽，把所有的幻燈片都平行的展示出來，一般放在末尾：
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"> </div>
最后，記得初始化：
<script>impress().init();</script>
好了，以上就是一些知識點總結，然后還提供了demo代碼。當然，如果你想創建更加好玩或者炫酷的PPT展示，還是得發揮你的創造力，而不是僅局限於demo的效果！我自己也得去研究研究…
參考了此處：http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html