因为工作室要办宣讲会 打算用impress.js做几个ppt

所以我就临时的学了一下 边做边学

感觉这个东西的难点大概就是对三维空间的利用吧

标准格式如下

<div class="step" data-属性="500" data-y="-400">

常用属性

data-x data-y data-z 定义元素中心在画布的坐标,默认为0 。

data-scale = "5" 这个元素就会被放大成原来的5倍。如果从这个场景退出,它会被还原原来的大小(缩小5倍)。

data-rotate = "360"顺时针旋转360度

data-rotate-x = "100" 绕x轴旋转100度。

data-rotate-y = "100" 绕y轴旋转100度。

data-rotate-z = "100" 绕z轴旋转100度。

data-transition-duration="2000" 改变切换场景的速度,默认的话是1000(也就是1秒)。

data-perspective="500"来改变透视的深度,默认是1000。

还需要使用 impress().init() 函数来初始化impress.js

1
2
<script src="js/impress.js"></script>
<script>impress().init()</script>

如果空间布局合理的话 最后用

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">

会有很酷炫的效果

也可以使用GUI工具Strut进行可视化的制作…