-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
Now, we'll learn to create the effect of a camera that moves through the slides; due to the fact that we cannot move the user's viewport, we'll need to simulate this feeling by moving the elements on the scene; this can be achieved by applying some transformations to #container.
To move the camera close to a slide, we need to apply the exact transformations we used on that slide, but with opposite values and in the reverse order. So, for example, if we want to view the frame whose data-sequence property is 3, we can write:
// not to be permanently added to the project
#container{
@include transform(scale(2) translateY(-300px) rotateX(-90deg));
}Here's the result:

The animation has to focus on a slide, stay still for some time, and then move to the next slide. When creating this kind of effect, we usually face the following two main problems:
CSS keyframes accepts only percentage values, but we'd rather prefer to use seconds as a measurement unit (for example, to say "move...
Change the font size
Change margin width
Change background colour