引文型概述

• 一个impress.js演示文稿就是一个可以任意大的canvas——<div id="impress">。
• 一个<div class="step">就是一“张”幻灯。
• 当前显示的幻灯，会被impress.js自动加上.active类。

详情参阅

step幻灯在canvas上的排布

• 它们的平面位置由data-x、data-y来指定，
• 它们距观众的远近由data-z来指定（当然会形成远近大小不同的效果），
• 它们本身真实的尺寸在css文件中指定，
• 它们的3D姿势由data-rotate-x、data-rotate-y来指定。

这里值得指出的是：感觉data-x与data-y的绝对数值并不重要（因为impress.js始终会把active step居中显示），重要的是第一个step的data-x和data-y，以及后续step（#overview也是一个（特殊的）step）相对于第一个的相对值。基本可以认为，#overview的data-x和data-y就是整个canvas的中心点。

active step决定了canvas整体在viewport中的3D摆放位置

• canvas整体在viewport上的位置，一定保证active step位于viewport正中：impress.js在显示每一step时，就是把canvas上的这个step div置于viewport正中央，并将该step div以原尺寸显示。
• canvas整体缩放显示出来的大小，一定保证active step以真实尺寸显示。（真实尺寸相同的两个step div，一个data-scale=3，一个data-scale=6，那么可以断言，在实际显示效果中，data-scale=6的永远是data-scale=3的两倍大，而不论如何缩放。因此，data-scale的绝对数值意义不大，有意义的是不同step间，它们data-scale的倍数对比。）
• canvas整体的3D位置，一定保证active step以标准的正面朝向观众。

这里值得指出的是data-scale：

Scaling is not relative to the scaling of other steps. Scaling is purely a higher or lower ratio of its original dimensions. For example, Step 1 and Step 2 having a scale value of 2 does not mean that Step 2 will be twice as large as Step 1.

尽管如此，我还是主张：data-scale的绝对数值意义不大，有意义的是不同step间，它们data-scale的倍数对比。

#overview

基本原则

• 要选择合适的data-scale，使其放大后的尺寸能将canvas上所有step都囊括进去
• 要选择合适的data-x、data-y与data-scale，使其放大后的尺寸确实将canvas上所有step都囊括进去，且边缘不出现大片无理留白。

id属性相同时，标签其他属性的设置也必须相同

严格说，id在同一个html文档中应该是唯一的，因此id="overview"的<div>只能有一个。但这里不管那么多了，如果需要反复zoom out强调大纲逻辑结构，则会引入多个<div id="overview">。此时，如果要改变#overview的data-x与data-y，则必须把所有的<div id="overview">中的data-x与data-y同时都改变为相同的值，才能确保达于预想的效果，否则，则需要指定不同的id，例如overview1、overview2、overview3等。对id值相同的<div>指定不同的data-x、data-y等属性值，会导致冲突，使得位于前面的设定不起作用。

#overview中各slide的可点击性

From impress.js source:

/*
    The last step is an overview.
    There is no content in it, so we make sure it's not visible because we want
    to be able to click on other steps.

*/
#overview { display: none }

就是说，在最后overview中，设置display为none，可以让canvas上元素都可被点击。

关于data-x、data-y、data-z、data-rotate-x、data-rotate-y等

• data-x、data-y与data-z描述<div>中心点的位置；
• data-rotate-x、data-rotate-y的基点是data-x、data-y与data-z所描述的位置。

旋转效果就都使用正六边形模型好了。如果边数低于6，则当论题过多时，旋转的度数会大大多于360，到时候会转晕。而边数多于6，data-x、data-y等坐标的推算又太复杂。

相关css技术要点

• 尽量统一设定.slide的高宽绝对px值，然后对slide中所包裹的div指定margin以得到正确定位。
• .step、.slide、#id等的css属性层叠权重：参阅这里。
• div位置排布的静态转换：CSS3中的转换都是用transform属性，这个属性的的值可取rotate、translate、scale、skew、perspective等等。应用transform属性，可以制造出div旋转、放大等效果（静态不动的）。
• div的动态过渡效果：采用transition属性。在某个div中指定初始样式，并给定transition属性，例如持续时间等等；再指定当这个div遇到特定事件后（如div:hover）的新样式；那么，当这个div果然遇到这个事件时，就会从原初的样式transit到新样式。

Styling的最佳实践

对于每一step的slide容器：

• 对每一步，指定相同的.step统一基本样式：<div class="step">；
• 对于具有相似样式的slides，统一指定它们的分组样式，例如指定一个.slide类：<div class="step slide">
• 对于需要特殊处理样式的单个slide，为其分配一个id，再对这个id指定特殊的样式：<div id="someid" class="step">。

对于slide容器之内的内容：

• 内容的样式，能用上述slide本身的.step、.slide、#someid来限定，就用它们来限定（注意W3C标准中，width、height仅是内容的宽高，并不包括padding、border与margin）；
• 如果必须对内容样式进行特别指定，则首先基于标签予以样式指定：.step htmltag {}、.slide htmltag {}、#someid htmltag{}等。
• 如果仍有不便，再对容器之内的内容本身添加额外的class、id等，并利用这些class与id予以样式指定。