Having completed all the rotation techniques in the previous section, we can now move on to creating a practical application using rotations. We will be using rotations around the z axis since it's the most widely used technique. The example application will contain eight circles in a circular path which will be rotated once the presentation starts. Here is a preview of what we are going to develop next:
The preceding screenshot shows the overview of our presentation. Let's look at how the first few steps are positioned in the screen using the following code:
<div id="slide1" class="step slide" data-x="-100" data-rotate-z="45" > <span class="circle">1</span> <p>Twitter</p> </div> <div id="slide2" class="step slide" data-x="-100" data-rotate-z="90" > <span class="circle">2</span> <p>Facebook</p> </div> <div id="slide3" class="step slide" data-x="-100" data-rotate-z="135" > ...