I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle.
My code looks like this:
<!doctype html>
<html>
<head>
<title>my first presentation using impress.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress">
<div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
<p>This is my first slide.</p>
</div>
<div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
<p>This is my second slide.</p>
</div>
<div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
<p>This is my third slide.</p>
</div>
<div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
<p>This is my fourth slide.</p>
</div>
</div>
<script type="text/javascript" src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
It has to look like this in the end.
I do not know why it is not working. Help is appreciated.
If you follow the index.html on Bartaz GitHub site, you would see, that you missed a line in configuring your presentation.
<script src="js/impress.js"></script> //add this line and edit the path accordingly
<script>impress().init();</script>
The code for rotating itself looks fine from my point of view. You just need to tinker with the positioning and the x and y axis.
Kind regards
//edit:
Check your data-rotate
in your third and fourth step. the -
is missing, and therefor it does not work, like it should.
<div id="impress">
<div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
<p style="font-size:36px;">This is my first slide.</p>
</div>
<div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
<p style="font-size:36px;">This is my second slide.</p>
</div>
<div id="3von4" class="step slide" data-x="0" data-y="1800" data-rotate="180">
<p style="font-size:36px;">This is my third slide.</p>
</div>
<div id="4von4" class="step slide" data-x="-950" data-y="950" data-rotate="270">
<p style="font-size:36px;">This is my fourth slide.</p>
</div>
</div>