Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

A Study in 3D Rotations

Unlike the x/y/z coordinates (aka translations), the rotate-x/y/z rotations are applied in a specific order, and order matters. This demo presentation exhibits the use of the new data-rotate- order attribute. Instead of the default "xyz" order, the steps use the reversed "zyx" order in applying rotations around each axis. Some of the steps (3 & 7), are in positions that are not possible with the default "xyz" order.

Slide one

Slide two

Slide three

Slide four

Slide five

Slide six

Slide seven

Slide eight