O'Reilly logo

Building Impressive Presentations with impress.js by Rakhitha Nimesh Ratnayake

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rotating effects

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.

Rotation around the x axis

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:

Rotation around the x axis

You can see Step 4 rotated around the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required