We can now use some 3D transform
properties to move and rotate each of these slides in a 3D scene. These transformations are absolutely arbitrary and can be chosen to suit the movie trailer's overall effect; here's an example:
div{ &[data-sequence="1"]{ @include transform(rotateX(45deg)); } &[data-sequence="2"]{ @include transform(rotateY(45deg) translateY(300px) scale(0.5)); } &[data-sequence="3"]{ @include transform(rotateX(90deg) translateY(300px) scale(0.5)); } &[data-sequence="4"]{ @include transform(rotateX(90deg) translateY(300px) translateX(600px) scale(0.5)); } &[data-sequence="5"]{ @include transform(rotateX(90deg) translateZ(300px) translateY(350px) translateX(600px) scale(0.5)); } &[data-sequence="6"]{ @include transform(rotateZ(30deg) translateY(500px) translateZ(300px)); } }
Now, we need to set some 3D standard properties such as transform-style
and perspective
on the slide's parent...