The idea behind the prezi presentations is innovative. It has changed the traditional image of presentation, and has made every step of the presentation special and interesting. But you have to pay for their service.
There is no program in the world that would make a developer happy, unless it is open source. There are plenty of open source presentation tools developed by the community which are very similar to Prezi. some of them have more powerful tools than Prezi. But they do not provide a fancy user interface nor user friendly unless the user is a developer. But gain ultimate control of all of your presentation. "reveal.js" and "impress.js" are two examples for these kind of open source tools.
Impress.js has been developed by Bartek Szopka. You can fork his impress.js repository from github. From the demo you would see how smoothly, impress.js handles the transformations. Bartek has mentioned every drop of information that you need to know in the source code. If you read html, javascript and css files you will understand most of them. How ever I am going to summarize everything. I will not explain the code in detail but the abstract method of making presentations. Please note that I am not an expert in making impress.js presentations I am only writing this to share my experience with you.
Before you make your first presentation you have to break down the ideas in to steps. Yes! exactly in the way how you break down your steps to make slides in Libre office . The slide like objects in impress.js are called "steps". You can place these steps anywhere in the canvas 3d space.Every step should be marked in a separate HTML division. You should assign the class "step" to corresponding <div> element of each step. To position the each step in the canvas we use "data-x", "data-y" and "data-z" parameters. Using "data-rotate-x", "data-rotate-y" and "data-rotate-z" we can rotate the text appearance in the canvas around x,y and z axes respectively. One other thing, you should use "data-scale" parameter to specify the scale of the whole step element compared to another one. A step will look like this
<div id = "test-div" class = "step" data-x = "1000" data-y = "2000" data-z = "0" data-rotate -x = "0" data-rotate-y = "0" data-rotate-z = "0" data-scale = "3">
<h1>Hello Impress</h1>
</div>
As always it is very handy if you use a separate css file to style your presentation. Try this out and wish you good luck.
