Back to Impress Js

relative rotations

examples/3D-positions/index.html

2.0.01022 B
Original Source

Demo of data-rel-position

This demo use data-rel-position="relative"
and data-rel-rotate-x/y/z
to easy 3D positioning of slides.

Front

There's two nested box here.

Inside Front

Inside Right

Right

Back

Inside Back

Inside Top

Top

Left

Inside Left

Inside Bottom

Bottom

Slide one

This is a ring of 8 slides.

It's easy constucted with data-rel-position="relative" without calculates the coordinates of all slides.

Slide two

The position of this slide is calculated as relatived position and rotation of the first slide.

The following slides don't need to set any position attributes, they are inherit from this slide.

Slide three

Slide four

Slide five

Slide six

Slide seven

Slide eight

Slide one

This is another ring of slides.

Except for the this slide, its code is just cloned from the yellow ring.

Just change the position of first slide, all the following slides are position relatived to it.

Slide two

Slide three

Slide four

Slide five

Slide six

Slide seven

Slide eight