In the earlier section, we learned how to use z axis positioning which showed us a glimpse into the 3D world. A real 3D effect comes with rotations and scaling. impress.js provides rotations around all the three axes, which can be very powerful in designing impressive visualizations. Let's get started on using rotations.
We can use the data-rotate-x
attribute to rotate elements around the x axis. The x axis is positioned from the left to the right of your screen in the horizontal direction. Let's take a look at how we can rotate around the x axis using a simple example:
You can see Step 4 rotated around the x axis at a 90 degree angle. The following is the code for this example. You can also work with the data-rotate-x.html
file in the source code folder for this example.
<div id="slide1" class="step slide" data-y="-400" data-z="-300" data-rotate-x="90" >
<div><h2>Slide 1</h2></div>
</div>
<div...